@nimbus-ds/patterns 1.38.2-rc.1 → 1.39.0-rc.2

package/dist/PlanDisplay/index.d.ts

@@ -5,35 +5,121 @@ import React from 'react';
 import { PropsWithChildren, ReactNode } from 'react';
 
 export interface PlanDisplayCardProperties {
+	/**
+	 * Renders the card with the legacy featured treatment (primary 3px border and level-3 shadow).
+	 * New consumers should use `ribbonLabel` or `gradient` to express the intended emphasis.
+	 * Ignored when either of those props is provided.
+	 * @deprecated Use `ribbonLabel` or `gradient` instead. This prop will be removed in a future major release.
+	 */
 	highlighted?: boolean;
+	/**
+	 * Renders the card with the Plans 2.0 gradient background (primary-surface → neutral-background).
+	 * Ignored when `ribbonLabel` is provided.
+	 */
+	gradient?: boolean;
+	/**
+	 * Label shown in a ribbon on top of the card (e.g. "Más escogido"). When provided, the card
+	 * is rendered with the featured style (primary ribbon + 2px primary border, no shadow),
+	 * taking precedence over `gradient`.
+	 * @TJS-type React.ReactNode
+	 */
+	ribbonLabel?: ReactNode;
 }
 export type PlanDisplayCardProps = PropsWithChildren<PlanDisplayCardProperties> & Omit<BoxProps, "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "boxShadow">;
 export declare const PlanDisplayCard: React.FC<PlanDisplayCardProps>;
-export type PlanDisplayCardHeaderProperties = {
+/**
+ * Properties of the plan display card header.
+ */
+export interface PlanDisplayCardHeaderProperties {
+	/**
+	 * Supporting text rendered above the title (e.g. the plan family name).
+	 */
 	subtitle: string;
+	/**
+	 * Main content of the header, typically the plan name and its price block.
+	 * @TJS-type React.ReactNode
+	 */
 	title: ReactNode;
-};
+	/**
+	 * Optional slot rendered to the right of the subtitle (e.g. a `<Tag>` like "Plan actual").
+	 * When provided, the subtitle row is laid out with space between the subtitle and the tag.
+	 * @TJS-type React.ReactNode
+	 */
+	tag?: ReactNode;
+}
 export type PlanDisplayCardHeaderProps = PropsWithChildren<PlanDisplayCardHeaderProperties>;
 export declare const PlanDisplayCardHeader: React.FC<PlanDisplayCardHeaderProps>;
 export type PlanDisplayCardContentProperties = PropsWithChildren;
 export declare const PlanDisplayCardContent: React.FC<PlanDisplayCardContentProperties>;
-export type PlanDisplayCardFooterProperties = PropsWithChildren;
-export declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProperties>;
+/**
+ * Properties of the plan display card footer.
+ */
+export interface PlanDisplayCardFooterProperties {
+	/**
+	 * Optional leading icon for an add-on style footer row (e.g. a point-of-sale icon next to a link).
+	 * When provided, the footer renders the icon and children side by side.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+}
+export type PlanDisplayCardFooterProps = PropsWithChildren<PlanDisplayCardFooterProperties>;
+export declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProps>;
 export type PlanDisplayCardSpacingProps = Omit<BoxProps, "children" | "borderTopWidth" | "borderColor" | "borderStyle" | "my">;
 export declare const PlanDisplayCardSpacing: React.FC<PlanDisplayCardSpacingProps>;
-export type PlanDisplayBulletProperties = {
+/**
+ * Properties of the bullet used to display a single plan feature row.
+ */
+export interface PlanDisplayBulletProperties {
+	/**
+	 * Icon rendered to the left of the bullet text.
+	 * @TJS-type React.ReactNode
+	 */
 	icon: ReactNode;
+	/**
+	 * Renders the bullet with the disabled treatment, to show a feature the plan does not include.
+	 */
 	disabled?: boolean;
-};
+	/**
+	 * Optional slot rendered inline after the bullet text (e.g. a `<Tag>` like "Nuevo").
+	 * @TJS-type React.ReactNode
+	 */
+	badge?: ReactNode;
+}
 export type PlanDisplayBulletProps = PropsWithChildren<PlanDisplayBulletProperties>;
 export declare const PlanDisplayBullet: React.FC<PlanDisplayBulletProps>;
+export type PlanDisplayCardPriceProperties = {
+	/**
+	 * The current price of the plan (e.g. "$999"). Rendered as the main, prominent value.
+	 * @TJS-type React.ReactNode
+	 */
+	price: ReactNode;
+	/**
+	 * Optional previous price, rendered with a line-through next to the current price.
+	 * @TJS-type React.ReactNode
+	 */
+	previousPrice?: ReactNode;
+	/**
+	 * Optional billing period suffix (e.g. "/mes") rendered next to the price.
+	 * @TJS-type React.ReactNode
+	 */
+	period?: ReactNode;
+	/**
+	 * Optional annual note rendered below the price (e.g. "R$696/año. Economiza R$132.").
+	 * Accepts a ReactNode so it can mix colors (e.g. an emphasized savings span).
+	 * @TJS-type React.ReactNode
+	 */
+	annualNote?: ReactNode;
+};
+export type PlanDisplayCardPriceProps = PlanDisplayCardPriceProperties;
+export declare const PlanDisplayCardPrice: React.FC<PlanDisplayCardPriceProps>;
 /**
  * Interface representing the internal components used in the PlanDisplay.
  */
 export interface PlanDisplayComponents {
 	/**
 	 * The card component used to display the plan. This component is used to wrap the header, content, and footer components, and it is able
-	 * to receive a 'highlighted' prop to feature a plan.
+	 * to receive a 'ribbonLabel' and/or a 'gradient' prop to feature a plan. The legacy
+	 * 'highlighted' prop remains available temporarily for backwards compatibility.
 	 */
 	Card: typeof PlanDisplayCard;
 	/**
@@ -41,6 +127,10 @@ export interface PlanDisplayComponents {
 	 * an optional children where additional information can be displayed.
 	 */
 	Header: typeof PlanDisplayCardHeader;
+	/**
+	 * The price component of the plan display card. It renders the current price and optionally a previous price (with line-through), a billing period suffix and an annual note.
+	 */
+	Price: typeof PlanDisplayCardPrice;
 	/**
 	 * The content component of the plan display card. This component is used to display the main content of the plan, such as the plan bullet points.
 	 */

package/dist/PlanDisplay/index.js

@@ -1,2 +1,2 @@
 "use client";
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"])}(global,((e,t)=>(()=>{"use strict";var r={1901:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplay=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280),o=r(5251),l=({minPlanWidth:e="225px",children:t,...r})=>n.default.createElement(a.Box,{display:"grid",gridTemplateColumns:`repeat(auto-fit, minmax(${e}, 1fr))`,gap:"6",justifyContent:"center",alignItems:"flex-start",...r},t);t.PlanDisplay=l,l.Card=o.PlanDisplayCard,l.Header=o.PlanDisplayCardHeader,l.Content=o.PlanDisplayCardContent,l.Spacing=o.PlanDisplayCardSpacing,l.Bullet=o.PlanDisplayBullet,l.Footer=o.PlanDisplayCardFooter,l.displayName="PlanDisplay",l.Card.displayName="PlanDisplay.Card",l.Bullet.displayName="PlanDisplay.Bullet",l.Header.displayName="PlanDisplay.CardHeader",l.Content.displayName="PlanDisplay.CardContent",l.Spacing.displayName="PlanDisplay.CardSpacing"},1577:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(3826),t),n.__exportStar(r(5251),t)},2814:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayBullet=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayBullet=({icon:e,disabled:t,children:r})=>n.default.createElement(a.Box,{display:"flex",gap:"2"},n.default.createElement(a.Box,{display:"flex",alignItems:"center"},n.default.createElement(a.Text,{as:"span",color:t?"neutral-interactive":"success-interactive"},n.default.createElement(a.Box,{display:"flex",alignItems:"center"},e))),n.default.createElement(a.Text,{fontWeight:"medium",color:t?"neutral-interactive":"neutral-textLow"},r))},1839:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayBullet=void 0;const n=r(2814);Object.defineProperty(t,"PlanDisplayBullet",{enumerable:!0,get:function(){return n.PlanDisplayBullet}}),t.default=n.PlanDisplayBullet},4680:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCard=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCard=({highlighted:e,children:t,...r})=>n.default.createElement(a.Box,{...e?{borderColor:"primary-interactive",borderRadius:"2",borderStyle:"solid",borderWidth:"3",boxShadow:"3"}:{},...r},n.default.createElement(a.Card,null,t))},9761:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCard=void 0;const n=r(4680);Object.defineProperty(t,"PlanDisplayCard",{enumerable:!0,get:function(){return n.PlanDisplayCard}}),t.default=n.PlanDisplayCard},5769:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardContent=void 0;const n=r(5163),a=n.__importDefault(r(8156)),o=r(5280),l=n.__importDefault(r(3314));t.PlanDisplayCardContent=({children:e})=>a.default.createElement(o.Card.Body,null,a.default.createElement(l.default,null),a.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"1",py:"4"},e))},8124:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardContent=void 0;const n=r(5769);Object.defineProperty(t,"PlanDisplayCardContent",{enumerable:!0,get:function(){return n.PlanDisplayCardContent}}),t.default=n.PlanDisplayCardContent},3104:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardFooter=void 0;const n=r(5163),a=n.__importDefault(r(8156)),o=r(5280),l=n.__importDefault(r(3314));t.PlanDisplayCardFooter=({children:e})=>a.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"4"},a.default.createElement(l.default,null),a.default.createElement(o.Box,null,e))},5776:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardFooter=void 0;const n=r(3104);Object.defineProperty(t,"PlanDisplayCardFooter",{enumerable:!0,get:function(){return n.PlanDisplayCardFooter}}),t.default=n.PlanDisplayCardFooter},3022:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardHeader=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCardHeader=({subtitle:e,title:t,children:r})=>n.default.createElement(a.Box,{display:"flex",flexDirection:"column"},n.default.createElement(a.Text,{fontWeight:"bold",fontSize:"highlight"},e),t,r&&n.default.createElement(a.Box,{pt:"3",pb:"4"},r))},8105:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardHeader=void 0;const n=r(3022);Object.defineProperty(t,"PlanDisplayCardHeader",{enumerable:!0,get:function(){return n.PlanDisplayCardHeader}}),t.default=n.PlanDisplayCardHeader},9288:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardSpacing=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCardSpacing=e=>n.default.createElement(a.Box,{...e,borderTopWidth:"1",borderColor:"neutral-surface",borderStyle:"solid",my:"1"})},3314:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardSpacing=void 0;const n=r(9288);Object.defineProperty(t,"PlanDisplayCardSpacing",{enumerable:!0,get:function(){return n.PlanDisplayCardSpacing}}),t.default=n.PlanDisplayCardSpacing},5251:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(9761),t),n.__exportStar(r(8105),t),n.__exportStar(r(8124),t),n.__exportStar(r(5776),t),n.__exportStar(r(3314),t),n.__exportStar(r(1839),t)},3826:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplay=void 0;const n=r(1901);var a=r(1901);Object.defineProperty(t,"PlanDisplay",{enumerable:!0,get:function(){return a.PlanDisplay}}),t.default=n.PlanDisplay},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>o,__asyncDelegator:()=>j,__asyncGenerator:()=>O,__asyncValues:()=>x,__await:()=>D,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>M,__createBinding:()=>b,__decorate:()=>i,__esDecorate:()=>u,__exportStar:()=>m,__extends:()=>a,__generator:()=>_,__importDefault:()=>B,__importStar:()=>E,__makeTemplateObject:()=>C,__metadata:()=>d,__param:()=>c,__propKey:()=>f,__read:()=>P,__rest:()=>l,__runInitializers:()=>s,__setFunctionName:()=>p,__spread:()=>h,__spreadArray:()=>w,__spreadArrays:()=>g,__values:()=>v});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var o=function(){return o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};function l(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}function i(e,t,r,n){var a,o=arguments.length,l=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(o<3?a(l):o>3?a(t,r,l):a(t,r))||l);return o>3&&l&&Object.defineProperty(t,r,l),l}function c(e,t){return function(r,n){t(r,n,e)}}function u(e,t,r,n,a,o){function l(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var i,c=n.kind,u="getter"===c?"get":"setter"===c?"set":"value",s=!t&&e?n.static?e:e.prototype:null,f=t||(s?Object.getOwnPropertyDescriptor(s,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var y={};for(var _ in n)y[_]="access"===_?{}:n[_];for(var _ in n.access)y.access[_]=n.access[_];y.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");o.push(l(e||null))};var b=(0,r[d])("accessor"===c?{get:f.get,set:f.set}:f[u],y);if("accessor"===c){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(i=l(b.get))&&(f.get=i),(i=l(b.set))&&(f.set=i),(i=l(b.init))&&a.push(i)}else(i=l(b))&&("field"===c?a.push(i):f[u]=i)}s&&Object.defineProperty(s,n.name,f),p=!0}function s(e,t,r){for(var n=arguments.length>2,a=0;a<t.length;a++)r=n?t[a].call(e,r):t[a].call(e);return n?r:void 0}function f(e){return"symbol"==typeof e?e:"".concat(e)}function p(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(a,o){function l(e){try{c(n.next(e))}catch(e){o(e)}}function i(e){try{c(n.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?a(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(l,i)}c((n=n.apply(e,t||[])).next())}))}function _(e,t){var r,n,a,o,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function i(i){return function(c){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(r=1,n&&(a=2&i[0]?n.return:i[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,i[1])).done)return a;switch(n=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,n=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=l.trys,(a=a.length>0&&a[a.length-1])||6!==i[0]&&2!==i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],n=0}finally{r=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function m(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function P(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,a,o=r.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)l.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return l}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(P(arguments[t]));return e}function g(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),a=0;for(t=0;t<r;t++)for(var o=arguments[t],l=0,i=o.length;l<i;l++,a++)n[a]=o[l];return n}function w(e,t,r){if(r||2===arguments.length)for(var n,a=0,o=t.length;a<o;a++)!n&&a in t||(n||(n=Array.prototype.slice.call(t,0,a)),n[a]=t[a]);return e.concat(n||Array.prototype.slice.call(t))}function D(e){return this instanceof D?(this.v=e,this):new D(e)}function O(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,a=r.apply(e,t||[]),o=[];return n={},l("next"),l("throw"),l("return"),n[Symbol.asyncIterator]=function(){return this},n;function l(e){a[e]&&(n[e]=function(t){return new Promise((function(r,n){o.push([e,t,r,n])>1||i(e,t)}))})}function i(e,t){try{(r=a[e](t)).value instanceof D?Promise.resolve(r.value.v).then(c,u):s(o[0][2],r)}catch(e){s(o[0][3],e)}var r}function c(e){i("next",e)}function u(e){i("throw",e)}function s(e,t){e(t),o.shift(),o.length&&i(o[0][0],o[0][1])}}function j(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,a){t[n]=e[n]?function(t){return(r=!r)?{value:D(e[n](t)),done:!1}:a?a(t):t}:a}}function x(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,a){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,a,(t=e[r](t)).done,t.value)}))}}}function C(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function E(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&b(t,e,r);return S(t,e),t}function B(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function M(e,t,r,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,r):a?a.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},5280:e=>{e.exports=t},8156:t=>{t.exports=e}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,a),o.exports}return a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a(1577)})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"])}(global,((e,t)=>(()=>{"use strict";var r={1901:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplay=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280),o=r(5251),l=({minPlanWidth:e="225px",children:t,...r})=>n.default.createElement(a.Box,{display:"grid",gridTemplateColumns:`repeat(auto-fit, minmax(${e}, 1fr))`,gap:"6",justifyContent:"center",alignItems:"stretch",...r},t);t.PlanDisplay=l,l.Card=o.PlanDisplayCard,l.Header=o.PlanDisplayCardHeader,l.Price=o.PlanDisplayCardPrice,l.Content=o.PlanDisplayCardContent,l.Spacing=o.PlanDisplayCardSpacing,l.Bullet=o.PlanDisplayBullet,l.Footer=o.PlanDisplayCardFooter,l.displayName="PlanDisplay",l.Card.displayName="PlanDisplay.Card",l.Bullet.displayName="PlanDisplay.Bullet",l.Header.displayName="PlanDisplay.CardHeader",l.Price.displayName="PlanDisplay.CardPrice",l.Content.displayName="PlanDisplay.CardContent",l.Spacing.displayName="PlanDisplay.CardSpacing",l.Footer.displayName="PlanDisplay.CardFooter"},1577:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(3826),t),n.__exportStar(r(5251),t)},2814:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayBullet=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayBullet=({icon:e,disabled:t,badge:r,children:o})=>n.default.createElement(a.Box,{display:"flex",gap:"2",alignItems:"center"},n.default.createElement(a.Box,{display:"flex",alignItems:"center"},n.default.createElement(a.Text,{as:"span",color:t?"neutral-interactive":"primary-interactive"},n.default.createElement(a.Box,{as:"span",display:"flex",alignItems:"center"},e))),r?n.default.createElement(a.Text,{fontWeight:"regular",color:t?"neutral-interactive":"neutral-textLow"},o," ",n.default.createElement("span",{style:{display:"inline-flex",gap:"var(--nimbus-spacing-2)",verticalAlign:"middle"}},r)):n.default.createElement(a.Text,{fontWeight:"regular",color:t?"neutral-interactive":"neutral-textLow"},o))},1839:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayBullet=void 0;const n=r(2814);Object.defineProperty(t,"PlanDisplayBullet",{enumerable:!0,get:function(){return n.PlanDisplayBullet}}),t.default=n.PlanDisplayBullet},4680:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCard=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280),o={borderTopLeftRadius:"var(--nimbus-shape-border-radius-2)",borderTopRightRadius:"var(--nimbus-shape-border-radius-2)",marginBottom:"calc(var(--nimbus-spacing-2) * -1)",overflow:"hidden"};t.PlanDisplayCard=({highlighted:e,ribbonLabel:t,gradient:r,children:l,...i})=>{const c=Boolean(t),u=((e,t)=>e?{borderColor:"primary-interactive",borderStyle:"solid",borderWidth:"2"}:t?{borderColor:"primary-interactive",borderStyle:"solid",borderWidth:"3",boxShadow:"3"}:{boxShadow:"2"})(c,Boolean(e&&!c&&!r));return n.default.createElement(a.Box,{...i,display:"flex",flexDirection:"column",height:"100%"},n.default.createElement("div",{style:o},n.default.createElement(a.Box,{"aria-hidden":!c||void 0,display:"flex",justifyContent:"center",alignItems:"center",pt:"0-5",pb:"2",backgroundColor:c?"primary-interactive":void 0},n.default.createElement(a.Text,{fontWeight:"medium",color:"neutral-background",textAlign:"center"},t||" "))),n.default.createElement(a.Box,{flex:"1 1 auto",display:"flex",flexDirection:"column",padding:"4",backgroundColor:"neutral-background",backgroundImage:r&&!c?"linear-gradient(194.55deg, var(--nimbus-colors-primary-surface) 4.18%, var(--nimbus-colors-neutral-background) 45.97%)":void 0,borderRadius:"2",overflow:"hidden",...u},l))}},9761:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCard=void 0;const n=r(4680);Object.defineProperty(t,"PlanDisplayCard",{enumerable:!0,get:function(){return n.PlanDisplayCard}}),t.default=n.PlanDisplayCard},5769:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardContent=void 0;const n=r(5163),a=n.__importDefault(r(8156)),o=r(5280),l=n.__importDefault(r(3314));t.PlanDisplayCardContent=({children:e})=>a.default.createElement(o.Card.Body,null,a.default.createElement(l.default,null),a.default.createElement(o.Box,{display:"flex",flexDirection:"column",gap:"3"},e))},8124:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardContent=void 0;const n=r(5769);Object.defineProperty(t,"PlanDisplayCardContent",{enumerable:!0,get:function(){return n.PlanDisplayCardContent}}),t.default=n.PlanDisplayCardContent},3104:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardFooter=void 0;const n=r(5163),a=n.__importDefault(r(8156)),o=r(5280),l=n.__importDefault(r(3314));t.PlanDisplayCardFooter=({icon:e,children:t})=>a.default.createElement(o.Box,{display:"flex",flexDirection:"column",mt:"auto"},a.default.createElement(l.default,null),e?a.default.createElement(o.Box,{display:"flex",gap:"2",alignItems:"flex-start"},a.default.createElement(o.Text,{as:"span",color:"primary-interactive"},a.default.createElement(o.Box,{as:"span",display:"flex",alignItems:"center"},e)),a.default.createElement(o.Box,null,t)):a.default.createElement(o.Box,null,t))},5776:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardFooter=void 0;const n=r(3104);Object.defineProperty(t,"PlanDisplayCardFooter",{enumerable:!0,get:function(){return n.PlanDisplayCardFooter}}),t.default=n.PlanDisplayCardFooter},3022:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardHeader=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCardHeader=({subtitle:e,title:t,tag:r,children:o})=>n.default.createElement(a.Box,{display:"flex",flexDirection:"column",gap:"3"},r?n.default.createElement(a.Box,{display:"flex",justifyContent:"space-between",alignItems:"center",gap:"2"},n.default.createElement(a.Text,{fontWeight:"bold",fontSize:"highlight",color:"neutral-textHigh"},e),r):n.default.createElement(a.Text,{fontWeight:"bold",fontSize:"highlight",color:"neutral-textHigh"},e),t,o&&n.default.createElement(a.Box,{pb:"4"},o))},8105:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardHeader=void 0;const n=r(3022);Object.defineProperty(t,"PlanDisplayCardHeader",{enumerable:!0,get:function(){return n.PlanDisplayCardHeader}}),t.default=n.PlanDisplayCardHeader},7708:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardPrice=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCardPrice=({price:e,previousPrice:t,period:r,annualNote:o})=>n.default.createElement(a.Box,{display:"flex",flexDirection:"column",gap:"2"},n.default.createElement(a.Box,{display:"flex",alignItems:"center",gap:"0-5"},n.default.createElement(a.Title,{as:"h3",color:"neutral-textHigh"},e),t&&n.default.createElement(a.Text,{as:"span",fontSize:"base",textDecoration:"line-through"},n.default.createElement("span",{style:{color:"var(--nimbus-colors-neutral-interactivePressed)"}},t)),r&&n.default.createElement(a.Text,{as:"span",color:"neutral-textHigh"},r)),o&&n.default.createElement(a.Text,{as:"p",fontSize:"caption",color:"neutral-textLow"},o))},1155:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardPrice=void 0;const n=r(7708);Object.defineProperty(t,"PlanDisplayCardPrice",{enumerable:!0,get:function(){return n.PlanDisplayCardPrice}}),t.default=n.PlanDisplayCardPrice},9288:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardSpacing=void 0;const n=r(5163).__importDefault(r(8156)),a=r(5280);t.PlanDisplayCardSpacing=e=>n.default.createElement(a.Box,{...e,my:"3"},n.default.createElement(a.Divider,null))},3314:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplayCardSpacing=void 0;const n=r(9288);Object.defineProperty(t,"PlanDisplayCardSpacing",{enumerable:!0,get:function(){return n.PlanDisplayCardSpacing}}),t.default=n.PlanDisplayCardSpacing},5251:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(9761),t),n.__exportStar(r(8105),t),n.__exportStar(r(8124),t),n.__exportStar(r(5776),t),n.__exportStar(r(3314),t),n.__exportStar(r(1839),t),n.__exportStar(r(1155),t)},3826:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.PlanDisplay=void 0;const n=r(1901);var a=r(1901);Object.defineProperty(t,"PlanDisplay",{enumerable:!0,get:function(){return a.PlanDisplay}}),t.default=n.PlanDisplay},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>o,__asyncDelegator:()=>C,__asyncGenerator:()=>w,__asyncValues:()=>O,__await:()=>D,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>M,__createBinding:()=>b,__decorate:()=>i,__esDecorate:()=>u,__exportStar:()=>_,__extends:()=>a,__generator:()=>m,__importDefault:()=>B,__importStar:()=>E,__makeTemplateObject:()=>j,__metadata:()=>p,__param:()=>c,__propKey:()=>d,__read:()=>P,__rest:()=>l,__runInitializers:()=>s,__setFunctionName:()=>f,__spread:()=>g,__spreadArray:()=>x,__spreadArrays:()=>h,__values:()=>v});var n=function(e,t){return n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},n(e,t)};function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var o=function(){return o=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var a in t=arguments[r])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},o.apply(this,arguments)};function l(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)t.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(r[n[a]]=e[n[a]])}return r}function i(e,t,r,n){var a,o=arguments.length,l=o<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(a=e[i])&&(l=(o<3?a(l):o>3?a(t,r,l):a(t,r))||l);return o>3&&l&&Object.defineProperty(t,r,l),l}function c(e,t){return function(r,n){t(r,n,e)}}function u(e,t,r,n,a,o){function l(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var i,c=n.kind,u="getter"===c?"get":"setter"===c?"set":"value",s=!t&&e?n.static?e:e.prototype:null,d=t||(s?Object.getOwnPropertyDescriptor(s,n.name):{}),f=!1,p=r.length-1;p>=0;p--){var y={};for(var m in n)y[m]="access"===m?{}:n[m];for(var m in n.access)y.access[m]=n.access[m];y.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");o.push(l(e||null))};var b=(0,r[p])("accessor"===c?{get:d.get,set:d.set}:d[u],y);if("accessor"===c){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(i=l(b.get))&&(d.get=i),(i=l(b.set))&&(d.set=i),(i=l(b.init))&&a.push(i)}else(i=l(b))&&("field"===c?a.push(i):d[u]=i)}s&&Object.defineProperty(s,n.name,d),f=!0}function s(e,t,r){for(var n=arguments.length>2,a=0;a<t.length;a++)r=n?t[a].call(e,r):t[a].call(e);return n?r:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(a,o){function l(e){try{c(n.next(e))}catch(e){o(e)}}function i(e){try{c(n.throw(e))}catch(e){o(e)}}function c(e){var t;e.done?a(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(l,i)}c((n=n.apply(e,t||[])).next())}))}function m(e,t){var r,n,a,o,l={label:0,sent:function(){if(1&a[0])throw a[1];return a[1]},trys:[],ops:[]};return o={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(o[Symbol.iterator]=function(){return this}),o;function i(i){return function(c){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;o&&(o=0,i[0]&&(l=0)),l;)try{if(r=1,n&&(a=2&i[0]?n.return:i[0]?n.throw||((a=n.return)&&a.call(n),0):n.next)&&!(a=a.call(n,i[1])).done)return a;switch(n=0,a&&(i=[2&i[0],a.value]),i[0]){case 0:case 1:a=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,n=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(a=l.trys,(a=a.length>0&&a[a.length-1])||6!==i[0]&&2!==i[0])){l=0;continue}if(3===i[0]&&(!a||i[1]>a[0]&&i[1]<a[3])){l.label=i[1];break}if(6===i[0]&&l.label<a[1]){l.label=a[1],a=i;break}if(a&&l.label<a[2]){l.label=a[2],l.ops.push(i);break}a[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],n=0}finally{r=a=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,c])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,a)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function _(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function P(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,a,o=r.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(n=o.next()).done;)l.push(n.value)}catch(e){a={error:e}}finally{try{n&&!n.done&&(r=o.return)&&r.call(o)}finally{if(a)throw a.error}}return l}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(P(arguments[t]));return e}function h(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),a=0;for(t=0;t<r;t++)for(var o=arguments[t],l=0,i=o.length;l<i;l++,a++)n[a]=o[l];return n}function x(e,t,r){if(r||2===arguments.length)for(var n,a=0,o=t.length;a<o;a++)!n&&a in t||(n||(n=Array.prototype.slice.call(t,0,a)),n[a]=t[a]);return e.concat(n||Array.prototype.slice.call(t))}function D(e){return this instanceof D?(this.v=e,this):new D(e)}function w(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,a=r.apply(e,t||[]),o=[];return n={},l("next"),l("throw"),l("return"),n[Symbol.asyncIterator]=function(){return this},n;function l(e){a[e]&&(n[e]=function(t){return new Promise((function(r,n){o.push([e,t,r,n])>1||i(e,t)}))})}function i(e,t){try{(r=a[e](t)).value instanceof D?Promise.resolve(r.value.v).then(c,u):s(o[0][2],r)}catch(e){s(o[0][3],e)}var r}function c(e){i("next",e)}function u(e){i("throw",e)}function s(e,t){e(t),o.shift(),o.length&&i(o[0][0],o[0][1])}}function C(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,a){t[n]=e[n]?function(t){return(r=!r)?{value:D(e[n](t)),done:!1}:a?a(t):t}:a}}function O(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,a){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,a,(t=e[r](t)).done,t.value)}))}}}function j(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var S=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function E(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&b(t,e,r);return S(t,e),t}function B(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function M(e,t,r,n,a){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!a)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!a:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?a.call(e,r):a?a.value=r:t.set(e,r),r}function I(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}},5280:e=>{e.exports=t},8156:t=>{t.exports=e}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,a),o.exports}return a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a(1577)})()));

package/dist/index.d.ts

@@ -1348,35 +1348,121 @@ export type InitialScreenProps = InitialScreenProperties & Omit<BoxProps, "width
  */
 export declare const InitialScreen: React.FC<InitialScreenProps> & InitialScreenComponents;
 export interface PlanDisplayCardProperties {
+	/**
+	 * Renders the card with the legacy featured treatment (primary 3px border and level-3 shadow).
+	 * New consumers should use `ribbonLabel` or `gradient` to express the intended emphasis.
+	 * Ignored when either of those props is provided.
+	 * @deprecated Use `ribbonLabel` or `gradient` instead. This prop will be removed in a future major release.
+	 */
 	highlighted?: boolean;
+	/**
+	 * Renders the card with the Plans 2.0 gradient background (primary-surface → neutral-background).
+	 * Ignored when `ribbonLabel` is provided.
+	 */
+	gradient?: boolean;
+	/**
+	 * Label shown in a ribbon on top of the card (e.g. "Más escogido"). When provided, the card
+	 * is rendered with the featured style (primary ribbon + 2px primary border, no shadow),
+	 * taking precedence over `gradient`.
+	 * @TJS-type React.ReactNode
+	 */
+	ribbonLabel?: ReactNode;
 }
 export type PlanDisplayCardProps = PropsWithChildren<PlanDisplayCardProperties> & Omit<BoxProps, "borderColor" | "borderRadius" | "borderStyle" | "borderWidth" | "boxShadow">;
 declare const PlanDisplayCard: React.FC<PlanDisplayCardProps>;
-export type PlanDisplayCardHeaderProperties = {
+/**
+ * Properties of the plan display card header.
+ */
+export interface PlanDisplayCardHeaderProperties {
+	/**
+	 * Supporting text rendered above the title (e.g. the plan family name).
+	 */
 	subtitle: string;
+	/**
+	 * Main content of the header, typically the plan name and its price block.
+	 * @TJS-type React.ReactNode
+	 */
 	title: ReactNode;
-};
+	/**
+	 * Optional slot rendered to the right of the subtitle (e.g. a `<Tag>` like "Plan actual").
+	 * When provided, the subtitle row is laid out with space between the subtitle and the tag.
+	 * @TJS-type React.ReactNode
+	 */
+	tag?: ReactNode;
+}
 export type PlanDisplayCardHeaderProps = PropsWithChildren<PlanDisplayCardHeaderProperties>;
 declare const PlanDisplayCardHeader: React.FC<PlanDisplayCardHeaderProps>;
 export type PlanDisplayCardContentProperties = PropsWithChildren;
 declare const PlanDisplayCardContent: React.FC<PlanDisplayCardContentProperties>;
-export type PlanDisplayCardFooterProperties = PropsWithChildren;
-declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProperties>;
+/**
+ * Properties of the plan display card footer.
+ */
+export interface PlanDisplayCardFooterProperties {
+	/**
+	 * Optional leading icon for an add-on style footer row (e.g. a point-of-sale icon next to a link).
+	 * When provided, the footer renders the icon and children side by side.
+	 * @TJS-type React.ReactNode
+	 */
+	icon?: ReactNode;
+}
+export type PlanDisplayCardFooterProps = PropsWithChildren<PlanDisplayCardFooterProperties>;
+declare const PlanDisplayCardFooter: React.FC<PlanDisplayCardFooterProps>;
 export type PlanDisplayCardSpacingProps = Omit<BoxProps, "children" | "borderTopWidth" | "borderColor" | "borderStyle" | "my">;
 declare const PlanDisplayCardSpacing: React.FC<PlanDisplayCardSpacingProps>;
-export type PlanDisplayBulletProperties = {
+/**
+ * Properties of the bullet used to display a single plan feature row.
+ */
+export interface PlanDisplayBulletProperties {
+	/**
+	 * Icon rendered to the left of the bullet text.
+	 * @TJS-type React.ReactNode
+	 */
 	icon: ReactNode;
+	/**
+	 * Renders the bullet with the disabled treatment, to show a feature the plan does not include.
+	 */
 	disabled?: boolean;
-};
+	/**
+	 * Optional slot rendered inline after the bullet text (e.g. a `<Tag>` like "Nuevo").
+	 * @TJS-type React.ReactNode
+	 */
+	badge?: ReactNode;
+}
 export type PlanDisplayBulletProps = PropsWithChildren<PlanDisplayBulletProperties>;
 declare const PlanDisplayBullet: React.FC<PlanDisplayBulletProps>;
+export type PlanDisplayCardPriceProperties = {
+	/**
+	 * The current price of the plan (e.g. "$999"). Rendered as the main, prominent value.
+	 * @TJS-type React.ReactNode
+	 */
+	price: ReactNode;
+	/**
+	 * Optional previous price, rendered with a line-through next to the current price.
+	 * @TJS-type React.ReactNode
+	 */
+	previousPrice?: ReactNode;
+	/**
+	 * Optional billing period suffix (e.g. "/mes") rendered next to the price.
+	 * @TJS-type React.ReactNode
+	 */
+	period?: ReactNode;
+	/**
+	 * Optional annual note rendered below the price (e.g. "R$696/año. Economiza R$132.").
+	 * Accepts a ReactNode so it can mix colors (e.g. an emphasized savings span).
+	 * @TJS-type React.ReactNode
+	 */
+	annualNote?: ReactNode;
+};
+export type PlanDisplayCardPriceProps = PlanDisplayCardPriceProperties;
+declare const PlanDisplayCardPrice: React.FC<PlanDisplayCardPriceProps>;
 /**
  * Interface representing the internal components used in the PlanDisplay.
  */
 export interface PlanDisplayComponents {
 	/**
 	 * The card component used to display the plan. This component is used to wrap the header, content, and footer components, and it is able
-	 * to receive a 'highlighted' prop to feature a plan.
+	 * to receive a 'ribbonLabel' and/or a 'gradient' prop to feature a plan. The legacy
+	 * 'highlighted' prop remains available temporarily for backwards compatibility.
 	 */
 	Card: typeof PlanDisplayCard;
 	/**
@@ -1384,6 +1470,10 @@ export interface PlanDisplayComponents {
 	 * an optional children where additional information can be displayed.
 	 */
 	Header: typeof PlanDisplayCardHeader;
+	/**
+	 * The price component of the plan display card. It renders the current price and optionally a previous price (with line-through), a billing period suffix and an annual note.
+	 */
+	Price: typeof PlanDisplayCardPrice;
 	/**
 	 * The content component of the plan display card. This component is used to display the main content of the plan, such as the plan bullet points.
 	 */