@medialane/ui 0.260.0 → 0.261.0

package/dist/components/action-button.cjs

@@ -59,6 +59,7 @@ function ActionButton({
   icon,
   big,
   ghost,
+  href,
   helpContent,
   disabled,
   children,
@@ -66,12 +67,15 @@ function ActionButton({
   style,
   ...rest
 }) {
+  const Tag = href ? "a" : "button";
+  const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
   const sizeClass = big ? "h-[54px] px-5 rounded-[13px] text-base" : "h-[46px] px-5 rounded-[13px] text-sm";
   if (ghost) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "button",
+      Tag,
       {
         ...rest,
+        ...linkProps,
         disabled,
         className: (0, import_cn.cn)(
           "inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",
@@ -92,9 +96,10 @@ function ActionButton({
   const fg = action ? ACTION_FOREGROUNDS[action] : tone ? TONE_FOREGROUNDS[tone] : ACTION_FOREGROUNDS.buy;
   const grad = `linear-gradient(115deg, ${gradColors.join(",")})`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "button",
+    Tag,
     {
       ...rest,
+      ...linkProps,
       disabled,
       className: (0, import_cn.cn)(
         "ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",

package/dist/components/action-button.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { HelpIcon } from \"./help-icon.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\n  action?: ActionKey;\n\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n\n  big?: boolean;\n\n  ghost?: boolean;\n\n  helpContent?: string;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-base\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent ? <HelpIcon content={helpContent} /> : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent ? <HelpIcon content={helpContent} /> : null}\n    </button>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAyEM;AAvEN,gBAAmB;AACnB,uBAAyB;AAEzB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAmBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,2CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,cAAc,4CAAC,6BAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,IACtD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,4CAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,cAAc,4CAAC,6BAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { HelpIcon } from \"./help-icon.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\n  href?: string;\n\n  action?: ActionKey;\n\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n\n  big?: boolean;\n\n  ghost?: boolean;\n\n  helpContent?: string;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  href,\n  helpContent,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const Tag = (href ? \"a\" : \"button\") as React.ElementType;\n  const linkProps = href ? { href, target: \"_blank\", rel: \"noopener noreferrer\" } : {};\n\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-base\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <Tag\n        {...rest}\n        {...linkProps}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent ? <HelpIcon content={helpContent} /> : null}\n      </Tag>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <Tag\n      {...rest}\n      {...linkProps}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent ? <HelpIcon content={helpContent} /> : null}\n    </Tag>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+EM;AA7EN,gBAAmB;AACnB,uBAAyB;AAEzB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAqBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAO,OAAO,MAAM;AAC1B,QAAM,YAAY,OAAO,EAAE,MAAM,QAAQ,UAAU,KAAK,sBAAsB,IAAI,CAAC;AAEnF,QAAM,YAAY,MACd,2CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA,eAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,cAAc,4CAAC,6BAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,IACtD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,eAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,4CAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,cAAc,4CAAC,6BAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/components/action-button.d.cts

@@ -5,6 +5,7 @@ declare const TONE_GRADIENTS: Record<string, [string, string, string]>;
 type ActionKey = keyof typeof ACTION_GRADIENTS;
 type ToneKey = keyof typeof TONE_GRADIENTS;
 interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    href?: string;
     action?: ActionKey;
     tone?: ToneKey;
     icon?: React.ReactNode;
@@ -12,6 +13,6 @@ interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement
     ghost?: boolean;
     helpContent?: string;
 }
-declare function ActionButton({ action, tone, icon, big, ghost, helpContent, disabled, children, className, style, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+declare function ActionButton({ action, tone, icon, big, ghost, href, helpContent, disabled, children, className, style, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
 
 export { ActionButton, type ActionButtonProps, type ActionKey, type ToneKey };

package/dist/components/action-button.d.ts

@@ -5,6 +5,7 @@ declare const TONE_GRADIENTS: Record<string, [string, string, string]>;
 type ActionKey = keyof typeof ACTION_GRADIENTS;
 type ToneKey = keyof typeof TONE_GRADIENTS;
 interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    href?: string;
     action?: ActionKey;
     tone?: ToneKey;
     icon?: React.ReactNode;
@@ -12,6 +13,6 @@ interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement
     ghost?: boolean;
     helpContent?: string;
 }
-declare function ActionButton({ action, tone, icon, big, ghost, helpContent, disabled, children, className, style, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
+declare function ActionButton({ action, tone, icon, big, ghost, href, helpContent, disabled, children, className, style, ...rest }: ActionButtonProps): react_jsx_runtime.JSX.Element;
 
 export { ActionButton, type ActionButtonProps, type ActionKey, type ToneKey };

package/dist/components/action-button.js

@@ -36,6 +36,7 @@ function ActionButton({
   icon,
   big,
   ghost,
+  href,
   helpContent,
   disabled,
   children,
@@ -43,12 +44,15 @@ function ActionButton({
   style,
   ...rest
 }) {
+  const Tag = href ? "a" : "button";
+  const linkProps = href ? { href, target: "_blank", rel: "noopener noreferrer" } : {};
   const sizeClass = big ? "h-[54px] px-5 rounded-[13px] text-base" : "h-[46px] px-5 rounded-[13px] text-sm";
   if (ghost) {
     return /* @__PURE__ */ jsxs(
-      "button",
+      Tag,
       {
         ...rest,
+        ...linkProps,
         disabled,
         className: cn(
           "inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",
@@ -69,9 +73,10 @@ function ActionButton({
   const fg = action ? ACTION_FOREGROUNDS[action] : tone ? TONE_FOREGROUNDS[tone] : ACTION_FOREGROUNDS.buy;
   const grad = `linear-gradient(115deg, ${gradColors.join(",")})`;
   return /* @__PURE__ */ jsxs(
-    "button",
+    Tag,
     {
       ...rest,
+      ...linkProps,
       disabled,
       className: cn(
         "ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap",

package/dist/components/action-button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { HelpIcon } from \"./help-icon.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\n  action?: ActionKey;\n\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n\n  big?: boolean;\n\n  ghost?: boolean;\n\n  helpContent?: string;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  helpContent,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-base\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <button\n        {...rest}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent ? <HelpIcon content={helpContent} /> : null}\n      </button>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <button\n      {...rest}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent ? <HelpIcon content={helpContent} /> : null}\n    </button>\n  );\n}\n"],"mappings":";AAyEM,SAYiB,KAZjB;AAvEN,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAEzB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAmBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,YAAY,MACd,2CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,cAAc,oBAAC,YAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,IACtD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,oBAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,cAAc,oBAAC,YAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/action-button.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn.js\";\nimport { HelpIcon } from \"./help-icon.js\";\n\nconst ACTION_GRADIENTS: Record<string, [string, string, string]> = {\n  buy:     ['#3b7bff', '#8a5cf6', '#3b7bff'],\n  submit:  ['#d6359a', '#5b4ce6', '#d6359a'],\n  offer:   ['#f6608f', '#fb8b46', '#f6608f'],\n  remix:   ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  license: ['#3b7bff', '#5b4ce6', '#3b7bff'],\n};\n\nconst ACTION_FOREGROUNDS: Record<string, string> = {\n  buy:     '#3b7bff',\n  submit:  '#5b4ce6',\n  offer:   '#fb7a32',\n  remix:   '#8a3ff0',\n  license: '#3b7bff',\n};\n\nconst TONE_GRADIENTS: Record<string, [string, string, string]> = {\n  blue:   ['#3b7bff', '#5b4ce6', '#3b7bff'],\n  purple: ['#8a5cf6', '#f6608f', '#8a5cf6'],\n  orange: ['#fb8b46', '#f6608f', '#fb8b46'],\n  red:    ['#ef5a5a', '#f6608f', '#ef5a5a'],\n  rose:   ['#f6608f', '#fb8b46', '#f6608f'],\n};\n\nconst TONE_FOREGROUNDS: Record<string, string> = {\n  blue:   '#2f6bff',\n  purple: '#8a3ff0',\n  orange: '#fb7a32',\n  red:    '#ef5a5a',\n  rose:   '#f6608f',\n};\n\nexport type ActionKey = keyof typeof ACTION_GRADIENTS;\nexport type ToneKey = keyof typeof TONE_GRADIENTS;\n\nexport interface ActionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n\n  href?: string;\n\n  action?: ActionKey;\n\n  tone?: ToneKey;\n  icon?: React.ReactNode;\n\n  big?: boolean;\n\n  ghost?: boolean;\n\n  helpContent?: string;\n}\n\nexport function ActionButton({\n  action,\n  tone,\n  icon,\n  big,\n  ghost,\n  href,\n  helpContent,\n  disabled,\n  children,\n  className,\n  style,\n  ...rest\n}: ActionButtonProps) {\n  const Tag = (href ? \"a\" : \"button\") as React.ElementType;\n  const linkProps = href ? { href, target: \"_blank\", rel: \"noopener noreferrer\" } : {};\n\n  const sizeClass = big\n    ? \"h-[54px] px-5 rounded-[13px] text-base\"\n    : \"h-[46px] px-5 rounded-[13px] text-sm\";\n\n  if (ghost) {\n    return (\n      <Tag\n        {...rest}\n        {...linkProps}\n        disabled={disabled}\n        className={cn(\n          \"inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n          \"bg-muted text-foreground border-none disabled:opacity-50 disabled:pointer-events-none\",\n          sizeClass,\n          className,\n        )}\n        style={style}\n      >\n        {icon}{children}\n        {helpContent ? <HelpIcon content={helpContent} /> : null}\n      </Tag>\n    );\n  }\n\n  const gradColors =\n    action ? ACTION_GRADIENTS[action] :\n    tone   ? TONE_GRADIENTS[tone] :\n    ACTION_GRADIENTS.buy;\n\n  const fg =\n    action ? ACTION_FOREGROUNDS[action] :\n    tone   ? TONE_FOREGROUNDS[tone] :\n    ACTION_FOREGROUNDS.buy;\n\n  const grad = `linear-gradient(115deg, ${gradColors.join(',')})`;\n\n  return (\n    <Tag\n      {...rest}\n      {...linkProps}\n      disabled={disabled}\n      className={cn(\n        \"ml-gbtn inline-flex items-center justify-center gap-2 font-semibold cursor-pointer whitespace-nowrap\",\n        \"bg-transparent text-foreground border-none relative disabled:opacity-40 disabled:pointer-events-none\",\n        sizeClass,\n        className,\n      )}\n      style={{ '--ml-grad': grad, ...style } as React.CSSProperties}\n    >\n      {icon && <span className=\"inline-flex\" style={{ color: fg }}>{icon}</span>}\n      {children}\n      {helpContent ? <HelpIcon content={helpContent} /> : null}\n    </Tag>\n  );\n}\n"],"mappings":";AA+EM,SAaiB,KAbjB;AA7EN,SAAS,UAAU;AACnB,SAAS,gBAAgB;AAEzB,MAAM,mBAA6D;AAAA,EACjE,KAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,QAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,OAAS,CAAC,WAAW,WAAW,SAAS;AAAA,EACzC,SAAS,CAAC,WAAW,WAAW,SAAS;AAC3C;AAEA,MAAM,qBAA6C;AAAA,EACjD,KAAS;AAAA,EACT,QAAS;AAAA,EACT,OAAS;AAAA,EACT,OAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,iBAA2D;AAAA,EAC/D,MAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,QAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,KAAQ,CAAC,WAAW,WAAW,SAAS;AAAA,EACxC,MAAQ,CAAC,WAAW,WAAW,SAAS;AAC1C;AAEA,MAAM,mBAA2C;AAAA,EAC/C,MAAQ;AAAA,EACR,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,KAAQ;AAAA,EACR,MAAQ;AACV;AAqBO,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,MAAO,OAAO,MAAM;AAC1B,QAAM,YAAY,OAAO,EAAE,MAAM,QAAQ,UAAU,KAAK,sBAAsB,IAAI,CAAC;AAEnF,QAAM,YAAY,MACd,2CACA;AAEJ,MAAI,OAAO;AACT,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACH,GAAG;AAAA,QACJ;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,UAAM;AAAA,UACN,cAAc,oBAAC,YAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,IACtD;AAAA,EAEJ;AAEA,QAAM,aACJ,SAAS,iBAAiB,MAAM,IAChC,OAAS,eAAe,IAAI,IAC5B,iBAAiB;AAEnB,QAAM,KACJ,SAAS,mBAAmB,MAAM,IAClC,OAAS,iBAAiB,IAAI,IAC9B,mBAAmB;AAErB,QAAM,OAAO,2BAA2B,WAAW,KAAK,GAAG,CAAC;AAE5D,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,aAAa,MAAM,GAAG,MAAM;AAAA,MAEpC;AAAA,gBAAQ,oBAAC,UAAK,WAAU,eAAc,OAAO,EAAE,OAAO,GAAG,GAAI,gBAAK;AAAA,QAClE;AAAA,QACA,cAAc,oBAAC,YAAS,SAAS,aAAa,IAAK;AAAA;AAAA;AAAA,EACtD;AAEJ;","names":[]}

package/dist/components/asset-access-cards.cjs

@@ -19,57 +19,45 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var asset_access_cards_exports = {};
 __export(asset_access_cards_exports, {
-  AssetAccessCards: () => AssetAccessCards,
-  CompanionAppCard: () => CompanionAppCard
+  AssetAccessButtons: () => AssetAccessButtons,
+  CompanionAppButton: () => CompanionAppButton
 });
 module.exports = __toCommonJS(asset_access_cards_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_lucide_react = require("lucide-react");
 var import_sdk = require("@medialane/sdk");
+var import_lucide_react = require("lucide-react");
 var import_medialane_app = require("./medialane-app.js");
+var import_action_button = require("./action-button.js");
 var import_cn = require("../utils/cn.js");
-const CARD = "group flex h-full w-full items-start gap-3 rounded-2xl border border-transparent p-4 text-left transition-colors";
-function CardBody({ icon: Icon, iconClassName, title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white", iconClassName), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-[18px] w-[18px]" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-sm font-bold leading-snug", children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: description }) : null
-    ] })
-  ] });
-}
-function CompanionAppCard({ asset }) {
+function CompanionAppButton({ asset }) {
   const { companion } = (0, import_medialane_app.useMedialaneApp)();
   if (!companion) return null;
+  const Icon = companion.icon;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "a",
+    import_action_button.ActionButton,
     {
+      action: "offer",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "h-4 w-4" }),
       href: `${companion.origin}${(0, import_sdk.assetHref)(asset.chain.toUpperCase(), asset.contractAddress, asset.tokenId)}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: (0, import_cn.cn)(CARD, "bg-gradient-to-br from-brand-rose/15 via-brand-orange/10 to-transparent hover:border-brand-orange/30"),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBody, { icon: companion.icon, iconClassName: "from-brand-rose to-brand-orange", title: companion.title, description: companion.description })
+      title: companion.description,
+      className: "w-full",
+      children: companion.title
     }
   );
 }
-function AssetAccessCards({ asset, stacked = false }) {
+function AssetAccessButtons({ asset, stacked = false }) {
   const { onRequireWallet, connectLabel = "Sign in", connectDescription, companion } = (0, import_medialane_app.useMedialaneApp)();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("grid grid-cols-1 gap-3 items-stretch", companion && !stacked && "sm:grid-cols-2"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        type: "button",
-        onClick: onRequireWallet,
-        className: (0, import_cn.cn)(CARD, "bg-gradient-to-br from-brand-blue/15 via-brand-purple/10 to-transparent hover:border-brand-purple/30"),
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardBody, { icon: import_lucide_react.Wallet, iconClassName: "from-brand-blue to-brand-purple", title: connectLabel, description: connectDescription })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompanionAppCard, { asset })
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_cn.cn)("grid grid-cols-1 gap-2", companion && !stacked && "sm:grid-cols-2"), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_action_button.ActionButton, { action: "buy", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Wallet, { className: "h-4 w-4" }), onClick: onRequireWallet, className: "w-full", children: connectLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CompanionAppButton, { asset })
+    ] }),
+    connectDescription ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs text-muted-foreground", children: connectDescription }) : null
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AssetAccessCards,
-  CompanionAppCard
+  AssetAccessButtons,
+  CompanionAppButton
 });
 //# sourceMappingURL=asset-access-cards.cjs.map

package/dist/components/asset-access-cards.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-access-cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ElementType } from \"react\";\nimport { Wallet } from \"lucide-react\";\nimport { assetHref, type Chain } from \"@medialane/sdk\";\nimport { useMedialaneApp, type AssetRef } from \"./medialane-app.js\";\nimport { cn } from \"../utils/cn.js\";\n\nconst CARD = \"group flex h-full w-full items-start gap-3 rounded-2xl border border-transparent p-4 text-left transition-colors\";\n\nfunction CardBody({ icon: Icon, iconClassName, title, description }: { icon: ElementType; iconClassName: string; title: string; description?: string }) {\n  return (\n    <>\n      <div className={cn(\"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white\", iconClassName)}>\n        <Icon className=\"h-[18px] w-[18px]\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-sm font-bold leading-snug\">{title}</p>\n        {description ? <p className=\"mt-0.5 text-xs leading-relaxed text-muted-foreground\">{description}</p> : null}\n      </div>\n    </>\n  );\n}\n\nexport function CompanionAppCard({ asset }: { asset: AssetRef }) {\n  const { companion } = useMedialaneApp();\n  if (!companion) return null;\n  return (\n    <a\n      href={`${companion.origin}${assetHref(asset.chain.toUpperCase() as Chain, asset.contractAddress, asset.tokenId)}`}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(CARD, \"bg-gradient-to-br from-brand-rose/15 via-brand-orange/10 to-transparent hover:border-brand-orange/30\")}\n    >\n      <CardBody icon={companion.icon} iconClassName=\"from-brand-rose to-brand-orange\" title={companion.title} description={companion.description} />\n    </a>\n  );\n}\n\nexport function AssetAccessCards({ asset, stacked = false }: { asset: AssetRef; stacked?: boolean }) {\n  const { onRequireWallet, connectLabel = \"Sign in\", connectDescription, companion } = useMedialaneApp();\n  return (\n    <div className={cn(\"grid grid-cols-1 gap-3 items-stretch\", companion && !stacked && \"sm:grid-cols-2\")}>\n      <button\n        type=\"button\"\n        onClick={onRequireWallet}\n        className={cn(CARD, \"bg-gradient-to-br from-brand-blue/15 via-brand-purple/10 to-transparent hover:border-brand-purple/30\")}\n      >\n        <CardBody icon={Wallet} iconClassName=\"from-brand-blue to-brand-purple\" title={connectLabel} description={connectDescription} />\n      </button>\n      <CompanionAppCard asset={asset} />\n    </div>\n  );\n}\n\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AATJ,0BAAuB;AACvB,iBAAsC;AACtC,2BAA+C;AAC/C,gBAAmB;AAEnB,MAAM,OAAO;AAEb,SAAS,SAAS,EAAE,MAAM,MAAM,eAAe,OAAO,YAAY,GAAsF;AACtJ,SACE,4EACE;AAAA,gDAAC,SAAI,eAAW,cAAG,oGAAoG,aAAa,GAClI,sDAAC,QAAK,WAAU,qBAAoB,GACtC;AAAA,IACA,6CAAC,SAAI,WAAU,kBACb;AAAA,kDAAC,OAAE,WAAU,kCAAkC,iBAAM;AAAA,MACpD,cAAc,4CAAC,OAAE,WAAU,wDAAwD,uBAAY,IAAO;AAAA,OACzG;AAAA,KACF;AAEJ;AAEO,SAAS,iBAAiB,EAAE,MAAM,GAAwB;AAC/D,QAAM,EAAE,UAAU,QAAI,sCAAgB;AACtC,MAAI,CAAC,UAAW,QAAO;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,GAAG,UAAU,MAAM,OAAG,sBAAU,MAAM,MAAM,YAAY,GAAY,MAAM,iBAAiB,MAAM,OAAO,CAAC;AAAA,MAC/G,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,eAAW,cAAG,MAAM,sGAAsG;AAAA,MAE1H,sDAAC,YAAS,MAAM,UAAU,MAAM,eAAc,mCAAkC,OAAO,UAAU,OAAO,aAAa,UAAU,aAAa;AAAA;AAAA,EAC9I;AAEJ;AAEO,SAAS,iBAAiB,EAAE,OAAO,UAAU,MAAM,GAA2C;AACnG,QAAM,EAAE,iBAAiB,eAAe,WAAW,oBAAoB,UAAU,QAAI,sCAAgB;AACrG,SACE,6CAAC,SAAI,eAAW,cAAG,wCAAwC,aAAa,CAAC,WAAW,gBAAgB,GAClG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,eAAW,cAAG,MAAM,sGAAsG;AAAA,QAE1H,sDAAC,YAAS,MAAM,4BAAQ,eAAc,mCAAkC,OAAO,cAAc,aAAa,oBAAoB;AAAA;AAAA,IAChI;AAAA,IACA,4CAAC,oBAAiB,OAAc;AAAA,KAClC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-access-cards.tsx"],"sourcesContent":["\"use client\";\n\nimport { assetHref, type Chain } from \"@medialane/sdk\";\nimport { Wallet } from \"lucide-react\";\nimport { useMedialaneApp, type AssetRef } from \"./medialane-app.js\";\nimport { ActionButton } from \"./action-button.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport function CompanionAppButton({ asset }: { asset: AssetRef }) {\n  const { companion } = useMedialaneApp();\n  if (!companion) return null;\n  const Icon = companion.icon;\n  return (\n    <ActionButton\n      action=\"offer\"\n      icon={<Icon className=\"h-4 w-4\" />}\n      href={`${companion.origin}${assetHref(asset.chain.toUpperCase() as Chain, asset.contractAddress, asset.tokenId)}`}\n      title={companion.description}\n      className=\"w-full\"\n    >\n      {companion.title}\n    </ActionButton>\n  );\n}\n\nexport function AssetAccessButtons({ asset, stacked = false }: { asset: AssetRef; stacked?: boolean }) {\n  const { onRequireWallet, connectLabel = \"Sign in\", connectDescription, companion } = useMedialaneApp();\n  return (\n    <div className=\"space-y-2\">\n      <div className={cn(\"grid grid-cols-1 gap-2\", companion && !stacked && \"sm:grid-cols-2\")}>\n        <ActionButton action=\"buy\" icon={<Wallet className=\"h-4 w-4\" />} onClick={onRequireWallet} className=\"w-full\">\n          {connectLabel}\n        </ActionButton>\n        <CompanionAppButton asset={asset} />\n      </div>\n      {connectDescription ? <p className=\"text-xs text-muted-foreground\">{connectDescription}</p> : null}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeY;AAbZ,iBAAsC;AACtC,0BAAuB;AACvB,2BAA+C;AAC/C,2BAA6B;AAC7B,gBAAmB;AAEZ,SAAS,mBAAmB,EAAE,MAAM,GAAwB;AACjE,QAAM,EAAE,UAAU,QAAI,sCAAgB;AACtC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,OAAO,UAAU;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,MAAM,4CAAC,QAAK,WAAU,WAAU;AAAA,MAChC,MAAM,GAAG,UAAU,MAAM,OAAG,sBAAU,MAAM,MAAM,YAAY,GAAY,MAAM,iBAAiB,MAAM,OAAO,CAAC;AAAA,MAC/G,OAAO,UAAU;AAAA,MACjB,WAAU;AAAA,MAET,oBAAU;AAAA;AAAA,EACb;AAEJ;AAEO,SAAS,mBAAmB,EAAE,OAAO,UAAU,MAAM,GAA2C;AACrG,QAAM,EAAE,iBAAiB,eAAe,WAAW,oBAAoB,UAAU,QAAI,sCAAgB;AACrG,SACE,6CAAC,SAAI,WAAU,aACb;AAAA,iDAAC,SAAI,eAAW,cAAG,0BAA0B,aAAa,CAAC,WAAW,gBAAgB,GACpF;AAAA,kDAAC,qCAAa,QAAO,OAAM,MAAM,4CAAC,8BAAO,WAAU,WAAU,GAAI,SAAS,iBAAiB,WAAU,UAClG,wBACH;AAAA,MACA,4CAAC,sBAAmB,OAAc;AAAA,OACpC;AAAA,IACC,qBAAqB,4CAAC,OAAE,WAAU,iCAAiC,8BAAmB,IAAO;AAAA,KAChG;AAEJ;","names":[]}

package/dist/components/asset-access-cards.d.cts

@@ -7,12 +7,12 @@ import 'starknet';
 import '@medialane/sdk';
 import '../utils/ipfs.cjs';
 
-declare function CompanionAppCard({ asset }: {
+declare function CompanionAppButton({ asset }: {
     asset: AssetRef;
 }): react_jsx_runtime.JSX.Element | null;
-declare function AssetAccessCards({ asset, stacked }: {
+declare function AssetAccessButtons({ asset, stacked }: {
     asset: AssetRef;
     stacked?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { AssetAccessCards, CompanionAppCard };
+export { AssetAccessButtons, CompanionAppButton };

package/dist/components/asset-access-cards.d.ts

@@ -7,12 +7,12 @@ import 'starknet';
 import '@medialane/sdk';
 import '../utils/ipfs.js';
 
-declare function CompanionAppCard({ asset }: {
+declare function CompanionAppButton({ asset }: {
     asset: AssetRef;
 }): react_jsx_runtime.JSX.Element | null;
-declare function AssetAccessCards({ asset, stacked }: {
+declare function AssetAccessButtons({ asset, stacked }: {
     asset: AssetRef;
     stacked?: boolean;
 }): react_jsx_runtime.JSX.Element;
 
-export { AssetAccessCards, CompanionAppCard };
+export { AssetAccessButtons, CompanionAppButton };

package/dist/components/asset-access-cards.js

@@ -1,50 +1,38 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Wallet } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { assetHref } from "@medialane/sdk";
+import { Wallet } from "lucide-react";
 import { useMedialaneApp } from "./medialane-app.js";
+import { ActionButton } from "./action-button.js";
 import { cn } from "../utils/cn.js";
-const CARD = "group flex h-full w-full items-start gap-3 rounded-2xl border border-transparent p-4 text-left transition-colors";
-function CardBody({ icon: Icon, iconClassName, title, description }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: cn("mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white", iconClassName), children: /* @__PURE__ */ jsx(Icon, { className: "h-[18px] w-[18px]" }) }),
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-sm font-bold leading-snug", children: title }),
-      description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-relaxed text-muted-foreground", children: description }) : null
-    ] })
-  ] });
-}
-function CompanionAppCard({ asset }) {
+function CompanionAppButton({ asset }) {
   const { companion } = useMedialaneApp();
   if (!companion) return null;
+  const Icon = companion.icon;
   return /* @__PURE__ */ jsx(
-    "a",
+    ActionButton,
     {
+      action: "offer",
+      icon: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }),
       href: `${companion.origin}${assetHref(asset.chain.toUpperCase(), asset.contractAddress, asset.tokenId)}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: cn(CARD, "bg-gradient-to-br from-brand-rose/15 via-brand-orange/10 to-transparent hover:border-brand-orange/30"),
-      children: /* @__PURE__ */ jsx(CardBody, { icon: companion.icon, iconClassName: "from-brand-rose to-brand-orange", title: companion.title, description: companion.description })
+      title: companion.description,
+      className: "w-full",
+      children: companion.title
     }
   );
 }
-function AssetAccessCards({ asset, stacked = false }) {
+function AssetAccessButtons({ asset, stacked = false }) {
   const { onRequireWallet, connectLabel = "Sign in", connectDescription, companion } = useMedialaneApp();
-  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-3 items-stretch", companion && !stacked && "sm:grid-cols-2"), children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onRequireWallet,
-        className: cn(CARD, "bg-gradient-to-br from-brand-blue/15 via-brand-purple/10 to-transparent hover:border-brand-purple/30"),
-        children: /* @__PURE__ */ jsx(CardBody, { icon: Wallet, iconClassName: "from-brand-blue to-brand-purple", title: connectLabel, description: connectDescription })
-      }
-    ),
-    /* @__PURE__ */ jsx(CompanionAppCard, { asset })
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-2", companion && !stacked && "sm:grid-cols-2"), children: [
+      /* @__PURE__ */ jsx(ActionButton, { action: "buy", icon: /* @__PURE__ */ jsx(Wallet, { className: "h-4 w-4" }), onClick: onRequireWallet, className: "w-full", children: connectLabel }),
+      /* @__PURE__ */ jsx(CompanionAppButton, { asset })
+    ] }),
+    connectDescription ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: connectDescription }) : null
   ] });
 }
 export {
-  AssetAccessCards,
-  CompanionAppCard
+  AssetAccessButtons,
+  CompanionAppButton
 };
 //# sourceMappingURL=asset-access-cards.js.map

package/dist/components/asset-access-cards.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/asset-access-cards.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ElementType } from \"react\";\nimport { Wallet } from \"lucide-react\";\nimport { assetHref, type Chain } from \"@medialane/sdk\";\nimport { useMedialaneApp, type AssetRef } from \"./medialane-app.js\";\nimport { cn } from \"../utils/cn.js\";\n\nconst CARD = \"group flex h-full w-full items-start gap-3 rounded-2xl border border-transparent p-4 text-left transition-colors\";\n\nfunction CardBody({ icon: Icon, iconClassName, title, description }: { icon: ElementType; iconClassName: string; title: string; description?: string }) {\n  return (\n    <>\n      <div className={cn(\"mt-0.5 flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br text-white\", iconClassName)}>\n        <Icon className=\"h-[18px] w-[18px]\" />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <p className=\"text-sm font-bold leading-snug\">{title}</p>\n        {description ? <p className=\"mt-0.5 text-xs leading-relaxed text-muted-foreground\">{description}</p> : null}\n      </div>\n    </>\n  );\n}\n\nexport function CompanionAppCard({ asset }: { asset: AssetRef }) {\n  const { companion } = useMedialaneApp();\n  if (!companion) return null;\n  return (\n    <a\n      href={`${companion.origin}${assetHref(asset.chain.toUpperCase() as Chain, asset.contractAddress, asset.tokenId)}`}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(CARD, \"bg-gradient-to-br from-brand-rose/15 via-brand-orange/10 to-transparent hover:border-brand-orange/30\")}\n    >\n      <CardBody icon={companion.icon} iconClassName=\"from-brand-rose to-brand-orange\" title={companion.title} description={companion.description} />\n    </a>\n  );\n}\n\nexport function AssetAccessCards({ asset, stacked = false }: { asset: AssetRef; stacked?: boolean }) {\n  const { onRequireWallet, connectLabel = \"Sign in\", connectDescription, companion } = useMedialaneApp();\n  return (\n    <div className={cn(\"grid grid-cols-1 gap-3 items-stretch\", companion && !stacked && \"sm:grid-cols-2\")}>\n      <button\n        type=\"button\"\n        onClick={onRequireWallet}\n        className={cn(CARD, \"bg-gradient-to-br from-brand-blue/15 via-brand-purple/10 to-transparent hover:border-brand-purple/30\")}\n      >\n        <CardBody icon={Wallet} iconClassName=\"from-brand-blue to-brand-purple\" title={connectLabel} description={connectDescription} />\n      </button>\n      <CompanionAppCard asset={asset} />\n    </div>\n  );\n}\n\n"],"mappings":";AAYI,mBAEI,KAEF,YAJF;AATJ,SAAS,cAAc;AACvB,SAAS,iBAA6B;AACtC,SAAS,uBAAsC;AAC/C,SAAS,UAAU;AAEnB,MAAM,OAAO;AAEb,SAAS,SAAS,EAAE,MAAM,MAAM,eAAe,OAAO,YAAY,GAAsF;AACtJ,SACE,iCACE;AAAA,wBAAC,SAAI,WAAW,GAAG,oGAAoG,aAAa,GAClI,8BAAC,QAAK,WAAU,qBAAoB,GACtC;AAAA,IACA,qBAAC,SAAI,WAAU,kBACb;AAAA,0BAAC,OAAE,WAAU,kCAAkC,iBAAM;AAAA,MACpD,cAAc,oBAAC,OAAE,WAAU,wDAAwD,uBAAY,IAAO;AAAA,OACzG;AAAA,KACF;AAEJ;AAEO,SAAS,iBAAiB,EAAE,MAAM,GAAwB;AAC/D,QAAM,EAAE,UAAU,IAAI,gBAAgB;AACtC,MAAI,CAAC,UAAW,QAAO;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,GAAG,UAAU,MAAM,GAAG,UAAU,MAAM,MAAM,YAAY,GAAY,MAAM,iBAAiB,MAAM,OAAO,CAAC;AAAA,MAC/G,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAW,GAAG,MAAM,sGAAsG;AAAA,MAE1H,8BAAC,YAAS,MAAM,UAAU,MAAM,eAAc,mCAAkC,OAAO,UAAU,OAAO,aAAa,UAAU,aAAa;AAAA;AAAA,EAC9I;AAEJ;AAEO,SAAS,iBAAiB,EAAE,OAAO,UAAU,MAAM,GAA2C;AACnG,QAAM,EAAE,iBAAiB,eAAe,WAAW,oBAAoB,UAAU,IAAI,gBAAgB;AACrG,SACE,qBAAC,SAAI,WAAW,GAAG,wCAAwC,aAAa,CAAC,WAAW,gBAAgB,GAClG;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAW,GAAG,MAAM,sGAAsG;AAAA,QAE1H,8BAAC,YAAS,MAAM,QAAQ,eAAc,mCAAkC,OAAO,cAAc,aAAa,oBAAoB;AAAA;AAAA,IAChI;AAAA,IACA,oBAAC,oBAAiB,OAAc;AAAA,KAClC;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/asset-access-cards.tsx"],"sourcesContent":["\"use client\";\n\nimport { assetHref, type Chain } from \"@medialane/sdk\";\nimport { Wallet } from \"lucide-react\";\nimport { useMedialaneApp, type AssetRef } from \"./medialane-app.js\";\nimport { ActionButton } from \"./action-button.js\";\nimport { cn } from \"../utils/cn.js\";\n\nexport function CompanionAppButton({ asset }: { asset: AssetRef }) {\n  const { companion } = useMedialaneApp();\n  if (!companion) return null;\n  const Icon = companion.icon;\n  return (\n    <ActionButton\n      action=\"offer\"\n      icon={<Icon className=\"h-4 w-4\" />}\n      href={`${companion.origin}${assetHref(asset.chain.toUpperCase() as Chain, asset.contractAddress, asset.tokenId)}`}\n      title={companion.description}\n      className=\"w-full\"\n    >\n      {companion.title}\n    </ActionButton>\n  );\n}\n\nexport function AssetAccessButtons({ asset, stacked = false }: { asset: AssetRef; stacked?: boolean }) {\n  const { onRequireWallet, connectLabel = \"Sign in\", connectDescription, companion } = useMedialaneApp();\n  return (\n    <div className=\"space-y-2\">\n      <div className={cn(\"grid grid-cols-1 gap-2\", companion && !stacked && \"sm:grid-cols-2\")}>\n        <ActionButton action=\"buy\" icon={<Wallet className=\"h-4 w-4\" />} onClick={onRequireWallet} className=\"w-full\">\n          {connectLabel}\n        </ActionButton>\n        <CompanionAppButton asset={asset} />\n      </div>\n      {connectDescription ? <p className=\"text-xs text-muted-foreground\">{connectDescription}</p> : null}\n    </div>\n  );\n}\n"],"mappings":";AAeY,cAcN,YAdM;AAbZ,SAAS,iBAA6B;AACtC,SAAS,cAAc;AACvB,SAAS,uBAAsC;AAC/C,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AAEZ,SAAS,mBAAmB,EAAE,MAAM,GAAwB;AACjE,QAAM,EAAE,UAAU,IAAI,gBAAgB;AACtC,MAAI,CAAC,UAAW,QAAO;AACvB,QAAM,OAAO,UAAU;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAO;AAAA,MACP,MAAM,oBAAC,QAAK,WAAU,WAAU;AAAA,MAChC,MAAM,GAAG,UAAU,MAAM,GAAG,UAAU,MAAM,MAAM,YAAY,GAAY,MAAM,iBAAiB,MAAM,OAAO,CAAC;AAAA,MAC/G,OAAO,UAAU;AAAA,MACjB,WAAU;AAAA,MAET,oBAAU;AAAA;AAAA,EACb;AAEJ;AAEO,SAAS,mBAAmB,EAAE,OAAO,UAAU,MAAM,GAA2C;AACrG,QAAM,EAAE,iBAAiB,eAAe,WAAW,oBAAoB,UAAU,IAAI,gBAAgB;AACrG,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,yBAAC,SAAI,WAAW,GAAG,0BAA0B,aAAa,CAAC,WAAW,gBAAgB,GACpF;AAAA,0BAAC,gBAAa,QAAO,OAAM,MAAM,oBAAC,UAAO,WAAU,WAAU,GAAI,SAAS,iBAAiB,WAAU,UAClG,wBACH;AAAA,MACA,oBAAC,sBAAmB,OAAc;AAAA,OACpC;AAAA,IACC,qBAAqB,oBAAC,OAAE,WAAU,iCAAiC,8BAAmB,IAAO;AAAA,KAChG;AAEJ;","names":[]}

package/dist/components/asset-marketplace-panel.cjs

@@ -34,21 +34,22 @@ var import_same_address = require("../utils/same-address.js");
 var import_cn = require("../utils/cn.js");
 var import_asset_access_cards = require("./asset-access-cards.js");
 var import_medialane_app = require("./medialane-app.js");
-var import_help_icon = require("./help-icon.js");
 function ActionRow({ children }) {
   const odd = import_react.Children.toArray(children).length % 2 === 1;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_cn.cn)("grid grid-cols-2 gap-2", odd && "[&>*:first-child]:col-span-2"), children });
 }
-function PriceLine({ label, order, usdValue }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyAmount, { amount: (0, import_format.formatDisplayPrice)(order.price.formatted), symbol: order.price.currency ?? "", iconSize: 14, amountClassName: "text-base font-bold text-foreground tabular-nums" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-semibold text-foreground", children: order.price.currency }),
-    usdValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "tabular-nums", children: [
-      "\xB7 ",
-      usdValue
-    ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_help_icon.HelpIcon, { content: `Expires ${(0, import_time.timeUntil)(order.endTime)}` })
+function PriceBlock({ order, usdValue }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: "Buy for" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-baseline gap-x-2 gap-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyAmount, { amount: (0, import_format.formatDisplayPrice)(order.price.formatted), symbol: order.price.currency ?? "", iconSize: 26, amountClassName: "text-3xl font-bold text-foreground tabular-nums" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg font-semibold text-foreground", children: order.price.currency }),
+      usdValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-sm tabular-nums text-muted-foreground", children: usdValue }) : null
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-xs text-muted-foreground", children: [
+      "Expires ",
+      (0, import_time.timeUntil)(order.endTime)
+    ] })
   ] });
 }
 function AssetMarketplacePanel({
@@ -102,17 +103,16 @@ function AssetMarketplacePanel({
     }
   ) : null;
   const offerButton = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_action_button.ActionButton, { action: "offer", icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-4 w-4" }), onClick: onOpenOffer, children: "Make offer" });
-  const buyButton = liveCheapest && (!isOwner || canBuyMore) ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_action_button.ActionButton, { action: "buy", onClick: () => onOpenPurchase(liveCheapest), children: [
+  const buyButton = liveCheapest && (!isOwner || canBuyMore) ? isOwner ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_action_button.ActionButton, { action: "buy", onClick: () => onOpenPurchase(liveCheapest), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Buy" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_currency_icon.CurrencyAmount, { amount: (0, import_format.formatDisplayPrice)(liveCheapest.price.formatted), symbol: liveCheapest.price.currency ?? "", iconSize: 14, amountClassName: "tabular-nums" }),
     usdValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-normal text-muted-foreground tabular-nums", children: [
       "\xB7 ",
       usdValue
     ] }) : null
-  ] }) : null;
-  const listedPrice = !isOwner && !isSignedIn && liveCheapest ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceLine, { label: "Price", order: liveCheapest, usdValue }) : null;
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_action_button.ActionButton, { action: "buy", onClick: () => onOpenPurchase(liveCheapest), children: "Buy now" }) : null;
+  const listedPrice = !isOwner && liveCheapest ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PriceBlock, { order: liveCheapest, usdValue }) : null;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative space-y-4", children: [
-    listedPrice,
     isOwner ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ActionRow, { children: [
         liveMyListing ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -148,31 +148,34 @@ function AssetMarketplacePanel({
         ) : null
       ] }),
       buyButton ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionRow, { children: buyButton }) : null
-    ] }) : isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "space-y-3", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ActionRow, { children: [
-      buyButton,
-      offerButton,
-      remixButton,
-      showDealOption && onProposeDeal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_action_button.ActionButton,
-        {
-          action: "license",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-4 w-4" }),
-          onClick: onProposeDeal,
-          helpContent: "Propose a license deal to the creator to use this work.",
-          children: "License"
-        }
-      ) : null,
-      showSponsorOption && onOpenSponsorProposal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_action_button.ActionButton,
-        {
-          tone: "blue",
-          icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Handshake, { className: "h-4 w-4" }),
-          onClick: onOpenSponsorProposal,
-          helpContent: "Propose to sponsor this creator's work \u2014 pay them directly for a license, no escrow.",
-          children: "Sponsor"
-        }
-      ) : null
-    ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_access_cards.AssetAccessCards, { asset, stacked: compact }),
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "space-y-4", children: [
+      listedPrice,
+      isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ActionRow, { children: [
+        buyButton,
+        offerButton,
+        remixButton,
+        showDealOption && onProposeDeal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_action_button.ActionButton,
+          {
+            action: "license",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-4 w-4" }),
+            onClick: onProposeDeal,
+            helpContent: "Propose a license deal to the creator to use this work.",
+            children: "License"
+          }
+        ) : null,
+        showSponsorOption && onOpenSponsorProposal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_action_button.ActionButton,
+          {
+            tone: "blue",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Handshake, { className: "h-4 w-4" }),
+            onClick: onOpenSponsorProposal,
+            helpContent: "Propose to sponsor this creator's work \u2014 pay them directly for a license, no escrow.",
+            children: "Sponsor"
+          }
+        ) : null
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_access_cards.AssetAccessButtons, { asset, stacked: compact })
+    ] }),
     myBid ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "rounded-xl bg-amber-500/8 px-4 py-3 flex items-center justify-between gap-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex items-center gap-2.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.HandCoins, { className: "h-4 w-4 text-amber-500 shrink-0" }),
@@ -236,7 +239,7 @@ function AssetMarketplacePanel({
         )
       ] }, bid.orderHash)) })
     ] }) : null,
-    isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_access_cards.CompanionAppCard, { asset }) : null
+    isSignedIn ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_asset_access_cards.CompanionAppButton, { asset }) : null
   ] }) });
 }
 // Annotate the CommonJS export names for ESM import in node: