@bikdotai/bik-component-library 0.0.369 → 0.0.370-beta-nth

package/dist/cjs/components/plans/NewSubscriptionPlan.d.ts

@@ -11,6 +11,7 @@ export interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
     isPlanSelected?: boolean;
     onClickShowAllFeatures?: () => void;
     showSelectedPlanChip?: boolean;
+    perMonthForYearly?: string;
 }
 type Props = NewSubscriptionPlanProps;
 export declare const NewSubscriptionPlan: FunctionComponent<Props>;

package/dist/cjs/components/plans/NewSubscriptionPlan.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../../assets/icons/checkCircle.svg.js"),i=require("../../assets/icons/quotes.svg.js"),a=require("../../assets/icons/WhiteStarFilled.svg.js"),n=require("../button/Button.js"),r=require("./SubscriptionPlanStyled.js"),o=require("../TypographyStyle.js"),l=require("../../hooks/useCurreny.js"),c=require("../../constants/Theme.js"),d=require("../tag/Tag.js");exports.NewSubscriptionPlan=h=>{var u;const{formatCurrency:j}=l.useCurrency(),p=h.showMonthlyOptions?h.features:h.annualFeatures||[],g=h.showMonthlyOptions?h.monthlyPlan:h.yearlyPlan,m=!h.isDisabled&&h.isMostPopular,x=h.showMonthlyOptions?h.code:null!==(u=h.yearlyCode)&&void 0!==u?u:h.code,y=e=>0==e?"$0":j(e,"USD"),{planName:b,isSelected:O=!1,isDisabled:C=!1,onPlanSelect:v,oldPrice:S,hideMonthYearTag:T,planDescription:N,planDescriptionDiscount:f,showTrialOptions:L,freeTrialMessages:P,extraBlockMessage:w,isLoading:k,buttonText:B,bottomDescription:M,showMonthlyOptions:q,popularTestimony:R,skipRadioSelection:D=!1,includeText:F,height:_,showFeaturesButton:z,businessDescription:W,isPlanSelected:$=!1,onClickShowAllFeatures:H,showSelectedPlanChip:I=!1}=h;return e.jsxs(r.NewSubscriptionStyled,Object.assign({height:_,showMostPopularChip:m||!1,onClick:()=>v(x)},{children:[m&&e.jsxs("div",Object.assign({className:"most-popular-chip"},{children:[e.jsx(o.Caption,Object.assign({className:"popular-text"},{children:"Most popular "})),e.jsx(a.default,{height:12,width:12})]})),e.jsxs("div",Object.assign({className:`box  ${C?"disabled":""} \n\t\t\t\t`},{children:[e.jsxs("div",Object.assign({className:"radio-flex"},{children:[!D&&e.jsx("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=C&&C,onChange:()=>v(x),className:"radio-button",checked:$}),e.jsx(o.TitleRegular,Object.assign({style:{color:c.COLORS.content.secondary,marginBottom:4}},{children:b})),I&&e.jsx("div",Object.assign({style:{marginLeft:"auto"}},{children:e.jsx(d.Tag,{tagText:"Current plan",type:"positive",theme:"dark"})}))]})),e.jsxs("div",Object.assign({className:"price-block"},{children:[S?e.jsx(o.BodyCaption,Object.assign({className:"old--price"},{children:y(g.price)})):e.jsx(e.Fragment,{}),e.jsx(o.TitleLarge,Object.assign({style:{color:c.COLORS.content.primary}},{children:y(S||g.price)})),e.jsx(o.BodyPrimary,Object.assign({style:{color:c.COLORS.content.secondary,marginLeft:4}},{children:T?"":"/ "+(q?"month":"year")}))]})),N&&e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(o.BodyCaption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:N})),f&&e.jsx(o.BodyCaption,Object.assign({style:{color:c.COLORS.background.positive.vibrant,marginLeft:4}},{children:f}))]})),W&&W.length&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:W.map(((s,t)=>e.jsx(o.BodySecondary,{style:{color:c.COLORS.content.secondary},dangerouslySetInnerHTML:{__html:s}},t)))})),L&&e.jsxs(o.Caption,Object.assign({className:"trial "+(O?"selected":"")},{children:["7 day free trial with ",P," messages"]})),w&&e.jsx(o.Caption,Object.assign({className:"trial "+(O?"selected":"")},{children:w})),F&&e.jsx(o.TitleSmall,Object.assign({className:"extra-include-margin"},{children:F})),e.jsx("div",Object.assign({className:"features"},{children:p.map(((s,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx("div",{children:e.jsx(t.default,{height:20,width:20,color:c.COLORS.content.primary})}),e.jsx(o.BodySecondary,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),z&&e.jsx(n.Button,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),H&&H()}}),D&&e.jsx("div",Object.assign({className:"button-box"},{children:k?e.jsx(n.Button,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e.jsxs(e.Fragment,{children:[O&&e.jsx(n.Button,{disabled:C,LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:B||"Selected Plan"}),!O&&!C&&e.jsx(n.Button,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),v(x)},matchParentWidth:!0,buttonText:B||"Choose plan"})]})})),R&&e.jsxs("div",Object.assign({className:"popular-testimony"},{children:[e.jsx(i.default,{height:26,width:70}),e.jsx("div",Object.assign({className:"testimony-text"},{children:R}))]}))]})),M&&e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${C?"disabled":""}\n\t\t\t\t\t${O?"selected":""}\n\t\t\t\t`},{children:e.jsx(o.Caption,Object.assign({className:"text",style:{color:c.COLORS.background.inverse}},{children:M}))}))]}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),s=require("../../assets/icons/check.svg.js"),t=require("../../assets/icons/checkCircle.svg.js"),i=require("../../assets/icons/quotes.svg.js"),a=require("../../assets/icons/WhiteStarFilled.svg.js"),n=require("../button/Button.js"),r=require("./SubscriptionPlanStyled.js"),o=require("../TypographyStyle.js"),l=require("../../hooks/useCurreny.js"),c=require("../../constants/Theme.js"),d=require("../tag/Tag.js");exports.NewSubscriptionPlan=h=>{var u;const{formatCurrency:j}=l.useCurrency(),p=h.showMonthlyOptions?h.features:h.annualFeatures||[],g=h.showMonthlyOptions?h.monthlyPlan:h.yearlyPlan,m=!h.isDisabled&&h.isMostPopular,y=h.showMonthlyOptions?h.code:null!==(u=h.yearlyCode)&&void 0!==u?u:h.code,x=e=>0==e?"$0":j(e,"USD"),{planName:b,isSelected:O=!1,isDisabled:C=!1,onPlanSelect:v,oldPrice:S,hideMonthYearTag:T,planDescription:N,planDescriptionDiscount:f,showTrialOptions:L,freeTrialMessages:P,extraBlockMessage:w,isLoading:k,buttonText:B,bottomDescription:M,showMonthlyOptions:q,popularTestimony:R,skipRadioSelection:D=!1,includeText:F,height:_,showFeaturesButton:z,businessDescription:W,isPlanSelected:$=!1,onClickShowAllFeatures:H,showSelectedPlanChip:I=!1,perMonthForYearly:Y}=h;return e.jsxs(r.NewSubscriptionStyled,Object.assign({height:_,showMostPopularChip:m||!1,onClick:()=>v(y)},{children:[m&&e.jsxs("div",Object.assign({className:"most-popular-chip"},{children:[e.jsx(o.Caption,Object.assign({className:"popular-text"},{children:"Most popular "})),e.jsx(a.default,{height:12,width:12})]})),e.jsxs("div",Object.assign({className:`box  ${C?"disabled":""} \n\t\t\t\t`},{children:[e.jsxs("div",Object.assign({className:"radio-flex"},{children:[!D&&e.jsx("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=C&&C,onChange:()=>v(y),className:"radio-button",checked:$}),e.jsx(o.TitleRegular,Object.assign({style:{color:c.COLORS.content.secondary,marginBottom:4}},{children:b})),I&&e.jsx("div",Object.assign({style:{marginLeft:"auto"}},{children:e.jsx(d.Tag,{tagText:"Current plan",type:"positive",theme:"dark"})}))]})),e.jsxs("div",Object.assign({className:"price-block"},{children:[S?e.jsx(o.BodyCaption,Object.assign({className:"old--price"},{children:x(g.price)})):e.jsx(e.Fragment,{}),e.jsx(o.TitleLarge,Object.assign({style:{color:c.COLORS.content.primary}},{children:x(S||g.price)})),e.jsx(o.BodyPrimary,Object.assign({style:{color:c.COLORS.content.secondary,marginLeft:4}},{children:T?"":"/ "+(q?"month":Y?"/month billed annually":"year")}))]})),N&&e.jsxs("div",Object.assign({className:"per-message-price"},{children:[e.jsx(o.BodyCaption,Object.assign({style:{color:c.COLORS.content.secondary}},{children:N})),f&&e.jsx(o.BodyCaption,Object.assign({style:{color:c.COLORS.background.positive.vibrant,marginLeft:4}},{children:f}))]})),W&&W.length&&e.jsx("div",Object.assign({style:{marginTop:4}},{children:W.map(((s,t)=>e.jsx(o.BodySecondary,{style:{color:c.COLORS.content.secondary},dangerouslySetInnerHTML:{__html:s}},t)))})),L&&e.jsxs(o.Caption,Object.assign({className:"trial "+(O?"selected":"")},{children:["7 day free trial with ",P," messages"]})),w&&e.jsx(o.Caption,Object.assign({className:"trial "+(O?"selected":"")},{children:w})),e.jsx(o.TitleSmall,Object.assign({className:"extra-include-margin",style:{height:F?"":"20px"}},{children:F||""})),e.jsx("div",Object.assign({className:"features"},{children:p.map(((s,i)=>e.jsxs("div",Object.assign({className:"feature"},{children:[e.jsx("div",{children:e.jsx(t.default,{height:20,width:20,color:c.COLORS.content.primary})}),e.jsx(o.BodySecondary,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),z&&e.jsx(n.Button,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),H&&H()}}),D&&e.jsx("div",Object.assign({className:"button-box"},{children:k?e.jsx(n.Button,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e.jsxs(e.Fragment,{children:[O&&e.jsx(n.Button,{disabled:C,LeadingIcon:s.default,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:B||"Selected Plan"}),!O&&!C&&e.jsx(n.Button,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),v(y)},matchParentWidth:!0,buttonText:B||"Choose plan"})]})})),R&&e.jsxs("div",Object.assign({className:"popular-testimony"},{children:[e.jsx(i.default,{height:26,width:70}),e.jsx("div",Object.assign({className:"testimony-text"},{children:R}))]}))]})),M&&e.jsx("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${C?"disabled":""}\n\t\t\t\t\t${O?"selected":""}\n\t\t\t\t`},{children:e.jsx(o.Caption,Object.assign({className:"text",style:{color:c.COLORS.background.inverse}},{children:M}))}))]}))};

package/dist/cjs/components/plans/SubscriptionPlansCollected.d.ts

@@ -9,6 +9,7 @@ type Props = {
     selectedTab?: 'monthly' | 'annually';
     selectedPlan?: string;
     currentPlan?: string;
+    perMonthForYearly?: boolean;
 };
 export declare const SubscriptionPlansCollected: FunctionComponent<Props>;
 export {};

package/dist/cjs/components/plans/SubscriptionPlansCollected.js

@@ -1,6 +1,6 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("./NewSubscriptionPlan.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const o=s(l).default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),l=require("styled-components"),n=require("./NewSubscriptionPlan.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=o(l).default.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
 	overflow-x: auto;
-`;exports.SubscriptionPlansCollected=l=>{var s;const[a,i]=t.useState(null!==(s=l.selectedPlan)&&void 0!==s?s:"");return e.jsx(o,Object.assign({style:{padding:"28px 0px"}},{children:l.plans.map(((s,o)=>{var r,c;return e.jsx("div",Object.assign({style:{width:null!==(r=l.staticWidth)&&void 0!==r?r:308}},{children:t.createElement(n.NewSubscriptionPlan,Object.assign({},s,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==l.selectedTab)&&void 0!==c&&c,showTrialOptions:l.showTrialOptions||!1,onPlanSelect:e=>{l.onPlanSelect(e),i(e)},key:s.planName,isPlanSelected:a==("monthly"==l.selectedTab?s.code:s.yearlyCode),onClickShowAllFeatures:l.onClickShowAllFeatures,showSelectedPlanChip:l.currentPlan==("monthly"==l.selectedTab?s.code:s.yearlyCode)}))}),o)}))}))};
+`;exports.SubscriptionPlansCollected=l=>{var o;const[s,a]=t.useState(null!==(o=l.selectedPlan)&&void 0!==o?o:"");return e.jsx(r,Object.assign({style:{padding:"28px 0px"}},{children:l.plans.map(((o,r)=>{var i,c;return e.jsx("div",Object.assign({style:{width:null!==(i=l.staticWidth)&&void 0!==i?i:308}},{children:t.createElement(n.NewSubscriptionPlan,Object.assign({},o,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==l.selectedTab)&&void 0!==c&&c,showTrialOptions:l.showTrialOptions||!1,onPlanSelect:e=>{l.onPlanSelect(e),a(e)},key:o.planName,isPlanSelected:s==("monthly"==l.selectedTab?o.code:o.yearlyCode),onClickShowAllFeatures:l.onClickShowAllFeatures,showSelectedPlanChip:l.currentPlan==("monthly"==l.selectedTab?o.code:o.yearlyCode),perMonthForYearly:o.perMonthForYearly}))}),r)}))}))};

package/dist/esm/components/plans/NewSubscriptionPlan.d.ts

@@ -11,6 +11,7 @@ export interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
     isPlanSelected?: boolean;
     onClickShowAllFeatures?: () => void;
     showSelectedPlanChip?: boolean;
+    perMonthForYearly?: string;
 }
 type Props = NewSubscriptionPlanProps;
 export declare const NewSubscriptionPlan: FunctionComponent<Props>;

package/dist/esm/components/plans/NewSubscriptionPlan.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import a from"../../assets/icons/checkCircle.svg.js";import n from"../../assets/icons/quotes.svg.js";import o from"../../assets/icons/WhiteStarFilled.svg.js";import{Button as r}from"../button/Button.js";import{NewSubscriptionStyled as l}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as d,BodyCaption as m,TitleLarge as h,BodyPrimary as p,BodySecondary as g,TitleSmall as b}from"../TypographyStyle.js";import{useCurrency as u}from"../../hooks/useCurreny.js";import{COLORS as y}from"../../constants/Theme.js";import{Tag as j}from"../tag/Tag.js";const O=O=>{var v;const{formatCurrency:f}=u(),T=O.showMonthlyOptions?O.features:O.annualFeatures||[],N=O.showMonthlyOptions?O.monthlyPlan:O.yearlyPlan,x=!O.isDisabled&&O.isMostPopular,P=O.showMonthlyOptions?O.code:null!==(v=O.yearlyCode)&&void 0!==v?v:O.code,k=e=>0==e?"$0":f(e,"USD"),{planName:C,isSelected:S=!1,isDisabled:w=!1,onPlanSelect:M,oldPrice:L,hideMonthYearTag:D,planDescription:z,planDescriptionDiscount:B,showTrialOptions:F,freeTrialMessages:W,extraBlockMessage:$,isLoading:_,buttonText:H,bottomDescription:I,showMonthlyOptions:q,popularTestimony:A,skipRadioSelection:R=!1,includeText:U,height:Y,showFeaturesButton:E,businessDescription:G,isPlanSelected:J=!1,onClickShowAllFeatures:K,showSelectedPlanChip:Q=!1}=O;return e(l,Object.assign({height:Y,showMostPopularChip:x||!1,onClick:()=>M(P)},{children:[x&&e("div",Object.assign({className:"most-popular-chip"},{children:[t(c,Object.assign({className:"popular-text"},{children:"Most popular "})),t(o,{height:12,width:12})]})),e("div",Object.assign({className:`box  ${w?"disabled":""} \n\t\t\t\t`},{children:[e("div",Object.assign({className:"radio-flex"},{children:[!R&&t("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=w&&w,onChange:()=>M(P),className:"radio-button",checked:J}),t(d,Object.assign({style:{color:y.content.secondary,marginBottom:4}},{children:C})),Q&&t("div",Object.assign({style:{marginLeft:"auto"}},{children:t(j,{tagText:"Current plan",type:"positive",theme:"dark"})}))]})),e("div",Object.assign({className:"price-block"},{children:[L?t(m,Object.assign({className:"old--price"},{children:k(N.price)})):t(s,{}),t(h,Object.assign({style:{color:y.content.primary}},{children:k(L||N.price)})),t(p,Object.assign({style:{color:y.content.secondary,marginLeft:4}},{children:D?"":"/ "+(q?"month":"year")}))]})),z&&e("div",Object.assign({className:"per-message-price"},{children:[t(m,Object.assign({style:{color:y.content.secondary}},{children:z})),B&&t(m,Object.assign({style:{color:y.background.positive.vibrant,marginLeft:4}},{children:B}))]})),G&&G.length&&t("div",Object.assign({style:{marginTop:4}},{children:G.map(((e,s)=>t(g,{style:{color:y.content.secondary},dangerouslySetInnerHTML:{__html:e}},s)))})),F&&e(c,Object.assign({className:"trial "+(S?"selected":"")},{children:["7 day free trial with ",W," messages"]})),$&&t(c,Object.assign({className:"trial "+(S?"selected":"")},{children:$})),U&&t(b,Object.assign({className:"extra-include-margin"},{children:U})),t("div",Object.assign({className:"features"},{children:T.map(((s,i)=>e("div",Object.assign({className:"feature"},{children:[t("div",{children:t(a,{height:20,width:20,color:y.content.primary})}),t(g,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),E&&t(r,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),K&&K()}}),R&&t("div",Object.assign({className:"button-box"},{children:_?t(r,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e(s,{children:[S&&t(r,{disabled:w,LeadingIcon:i,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:H||"Selected Plan"}),!S&&!w&&t(r,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),M(P)},matchParentWidth:!0,buttonText:H||"Choose plan"})]})})),A&&e("div",Object.assign({className:"popular-testimony"},{children:[t(n,{height:26,width:70}),t("div",Object.assign({className:"testimony-text"},{children:A}))]}))]})),I&&t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${w?"disabled":""}\n\t\t\t\t\t${S?"selected":""}\n\t\t\t\t`},{children:t(c,Object.assign({className:"text",style:{color:y.background.inverse}},{children:I}))}))]}))};export{O as NewSubscriptionPlan};
+import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import a from"../../assets/icons/checkCircle.svg.js";import n from"../../assets/icons/quotes.svg.js";import o from"../../assets/icons/WhiteStarFilled.svg.js";import{Button as r}from"../button/Button.js";import{NewSubscriptionStyled as l}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as d,BodyCaption as h,TitleLarge as m,BodyPrimary as p,BodySecondary as g,TitleSmall as b}from"../TypographyStyle.js";import{useCurrency as u}from"../../hooks/useCurreny.js";import{COLORS as y}from"../../constants/Theme.js";import{Tag as j}from"../tag/Tag.js";const O=O=>{var v;const{formatCurrency:f}=u(),T=O.showMonthlyOptions?O.features:O.annualFeatures||[],N=O.showMonthlyOptions?O.monthlyPlan:O.yearlyPlan,x=!O.isDisabled&&O.isMostPopular,P=O.showMonthlyOptions?O.code:null!==(v=O.yearlyCode)&&void 0!==v?v:O.code,k=e=>0==e?"$0":f(e,"USD"),{planName:C,isSelected:S=!1,isDisabled:w=!1,onPlanSelect:M,oldPrice:L,hideMonthYearTag:D,planDescription:F,planDescriptionDiscount:z,showTrialOptions:B,freeTrialMessages:W,extraBlockMessage:$,isLoading:_,buttonText:H,bottomDescription:I,showMonthlyOptions:Y,popularTestimony:q,skipRadioSelection:A=!1,includeText:R,height:U,showFeaturesButton:E,businessDescription:G,isPlanSelected:J=!1,onClickShowAllFeatures:K,showSelectedPlanChip:Q=!1,perMonthForYearly:V}=O;return e(l,Object.assign({height:U,showMostPopularChip:x||!1,onClick:()=>M(P)},{children:[x&&e("div",Object.assign({className:"most-popular-chip"},{children:[t(c,Object.assign({className:"popular-text"},{children:"Most popular "})),t(o,{height:12,width:12})]})),e("div",Object.assign({className:`box  ${w?"disabled":""} \n\t\t\t\t`},{children:[e("div",Object.assign({className:"radio-flex"},{children:[!A&&t("input",{type:"radio",id:"html",name:"fav_language",value:"HTML",disabled:null!=w&&w,onChange:()=>M(P),className:"radio-button",checked:J}),t(d,Object.assign({style:{color:y.content.secondary,marginBottom:4}},{children:C})),Q&&t("div",Object.assign({style:{marginLeft:"auto"}},{children:t(j,{tagText:"Current plan",type:"positive",theme:"dark"})}))]})),e("div",Object.assign({className:"price-block"},{children:[L?t(h,Object.assign({className:"old--price"},{children:k(N.price)})):t(s,{}),t(m,Object.assign({style:{color:y.content.primary}},{children:k(L||N.price)})),t(p,Object.assign({style:{color:y.content.secondary,marginLeft:4}},{children:D?"":"/ "+(Y?"month":V?"/month billed annually":"year")}))]})),F&&e("div",Object.assign({className:"per-message-price"},{children:[t(h,Object.assign({style:{color:y.content.secondary}},{children:F})),z&&t(h,Object.assign({style:{color:y.background.positive.vibrant,marginLeft:4}},{children:z}))]})),G&&G.length&&t("div",Object.assign({style:{marginTop:4}},{children:G.map(((e,s)=>t(g,{style:{color:y.content.secondary},dangerouslySetInnerHTML:{__html:e}},s)))})),B&&e(c,Object.assign({className:"trial "+(S?"selected":"")},{children:["7 day free trial with ",W," messages"]})),$&&t(c,Object.assign({className:"trial "+(S?"selected":"")},{children:$})),t(b,Object.assign({className:"extra-include-margin",style:{height:R?"":"20px"}},{children:R||""})),t("div",Object.assign({className:"features"},{children:T.map(((s,i)=>e("div",Object.assign({className:"feature"},{children:[t("div",{children:t(a,{height:20,width:20,color:y.content.primary})}),t(g,Object.assign({className:"feature-text"},{children:s.detail}),i)]}),s.detail)))})),E&&t(r,{isLoading:!1,buttonType:"tertiary",buttonText:"See all features",size:"small",onClick:e=>{e.stopPropagation(),K&&K()}}),A&&t("div",Object.assign({className:"button-box"},{children:_?t(r,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e(s,{children:[S&&t(r,{disabled:w,LeadingIcon:i,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:H||"Selected Plan"}),!S&&!w&&t(r,{buttonType:"primary",size:"medium",onClick:e=>{e.stopPropagation(),M(P)},matchParentWidth:!0,buttonText:H||"Choose plan"})]})})),q&&e("div",Object.assign({className:"popular-testimony"},{children:[t(n,{height:26,width:70}),t("div",Object.assign({className:"testimony-text"},{children:q}))]}))]})),I&&t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${w?"disabled":""}\n\t\t\t\t\t${S?"selected":""}\n\t\t\t\t`},{children:t(c,Object.assign({className:"text",style:{color:y.background.inverse}},{children:I}))}))]}))};export{O as NewSubscriptionPlan};

package/dist/esm/components/plans/SubscriptionPlansCollected.d.ts

@@ -9,6 +9,7 @@ type Props = {
     selectedTab?: 'monthly' | 'annually';
     selectedPlan?: string;
     currentPlan?: string;
+    perMonthForYearly?: boolean;
 };
 export declare const SubscriptionPlansCollected: FunctionComponent<Props>;
 export {};

package/dist/esm/components/plans/SubscriptionPlansCollected.js

@@ -1,6 +1,6 @@
-import{jsx as e}from"react/jsx-runtime";import{useState as l,createElement as t}from"react";import o from"styled-components";import{NewSubscriptionPlan as n}from"./NewSubscriptionPlan.js";const s=o.div`
+import{jsx as e}from"react/jsx-runtime";import{useState as l,createElement as t}from"react";import o from"styled-components";import{NewSubscriptionPlan as n}from"./NewSubscriptionPlan.js";const r=o.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
 	overflow-x: auto;
-`,a=o=>{var a;const[i,r]=l(null!==(a=o.selectedPlan)&&void 0!==a?a:"");return e(s,Object.assign({style:{padding:"28px 0px"}},{children:o.plans.map(((l,s)=>{var a,c;return e("div",Object.assign({style:{width:null!==(a=o.staticWidth)&&void 0!==a?a:308}},{children:t(n,Object.assign({},l,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==o.selectedTab)&&void 0!==c&&c,showTrialOptions:o.showTrialOptions||!1,onPlanSelect:e=>{o.onPlanSelect(e),r(e)},key:l.planName,isPlanSelected:i==("monthly"==o.selectedTab?l.code:l.yearlyCode),onClickShowAllFeatures:o.onClickShowAllFeatures,showSelectedPlanChip:o.currentPlan==("monthly"==o.selectedTab?l.code:l.yearlyCode)}))}),s)}))}))};export{a as SubscriptionPlansCollected};
+`,a=o=>{var a;const[s,i]=l(null!==(a=o.selectedPlan)&&void 0!==a?a:"");return e(r,Object.assign({style:{padding:"28px 0px"}},{children:o.plans.map(((l,r)=>{var a,c;return e("div",Object.assign({style:{width:null!==(a=o.staticWidth)&&void 0!==a?a:308}},{children:t(n,Object.assign({},l,{showMonthly:!0,showMonthlyOptions:null!==(c="monthly"==o.selectedTab)&&void 0!==c&&c,showTrialOptions:o.showTrialOptions||!1,onPlanSelect:e=>{o.onPlanSelect(e),i(e)},key:l.planName,isPlanSelected:s==("monthly"==o.selectedTab?l.code:l.yearlyCode),onClickShowAllFeatures:o.onClickShowAllFeatures,showSelectedPlanChip:o.currentPlan==("monthly"==o.selectedTab?l.code:l.yearlyCode),perMonthForYearly:l.perMonthForYearly}))}),r)}))}))};export{a as SubscriptionPlansCollected};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.369",
+	"version": "0.0.370-beta-nth",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",