npm - @bikdotai/bik-component-library - Versions diffs - 0.0.814 → 0.0.815 - Mend

@bikdotai/bik-component-library 0.0.814 → 0.0.815

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (733) hide show

package/dist/cjs/components/navigation-hyperlink/NavigationHyperlink.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),c=require("styled-components"),d=i=>{const{router:o,href:e,newTab:s}=i,a=t=>{if(e.includes("http")){const n=s||t.metaKey?"_blank":"_self";window.open(e,n)}else{const n=`${e.startsWith("/")?"":"/"}${e}`;t.metaKey?window.open(window.location.origin+n,"_blank"):o?o.push(window.location.origin+n):window.open(window.location.origin+n,"_self")}};return l.jsx(r,{onClick:a,children:i.children})},r=c.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("styled-components"),d=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},f=d(c),p=n=>{const{router:i,href:t,newTab:l}=n,r=o=>{if(t.includes("http")){const e=l||o.metaKey?"_blank":"_self";window.open(t,e)}else{const e=`${t.startsWith("/")?"":"/"}${t}`;o.metaKey?window.open(window.location.origin+e,"_blank"):i?i.push(window.location.origin+e):window.open(window.location.origin+e,"_self")}};return s.jsx(a,{onClick:r,children:n.children})},a=f.default.div`
 	//	display: inline-block;
-`;exports.NaLinkWrapper=r;exports.NavigationHyperlink=d;
+`;exports.NaLinkWrapper=a;exports.NavigationHyperlink=p;
 //# sourceMappingURL=NavigationHyperlink.js.map

package/dist/cjs/components/navigation-hyperlink/NavigationHyperlink.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"NavigationHyperlink.js","sources":["../../../../src/components/navigation-hyperlink/NavigationHyperlink.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport interface NavigationHyperlinkProps {\n\trouter: any;\n\thref: string;\n\tchildren?: ReactNode;\n\tnewTab?: boolean;\n}\n\nexport const NavigationHyperlink: React.FC<NavigationHyperlinkProps> = (\n\tnavigationHyperlinkProps,\n) => {\n\tconst { router, href, newTab } = navigationHyperlinkProps;\n\n\tconst onNavigation = (event) => {\n\t\tconst isExternal = href.includes('http');\n\t\tif (isExternal) {\n\t\t\tconst openInNewTab = newTab \|\| event.metaKey ? '_blank' : '_self';\n\t\t\twindow.open(href, openInNewTab);\n\t\t} else {\n\t\t\tconst formattedHref = `${href.startsWith('/') ? '' : '/'}${href}`;\n\t\t\tif (!event.metaKey) {\n\t\t\t\tif (router) {\n\t\t\t\t\trouter.push(window.location.origin + formattedHref);\n\t\t\t\t} else {\n\t\t\t\t\twindow.open(window.location.origin + formattedHref, '_self');\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\twindow.open(window.location.origin + formattedHref, '_blank');\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<NaLinkWrapper onClick={onNavigation}>\n\t\t\t{navigationHyperlinkProps.children}\n\t\t</NaLinkWrapper>\n\t);\n};\n\nexport const NaLinkWrapper = styled.div`\n\t//\tdisplay: inline-block;\n`;\n"],"names":["NavigationHyperlink","navigationHyperlinkProps","router","href","newTab","onNavigation","event","openInNewTab","formattedHref","jsx","NaLinkWrapper","styled"],"mappings":"~~oJAUaA~~,EACZC,GACI,CACJ,KAAM,CAAE,OAAAC,EAAQ,KAAAC,EAAM,OAAAC,CAAA,EAAWH,EAE3BI,EAAgBC,GAAU,CAE/B,GADmBH,EAAK,SAAS,MAAM,EACvB,CACf,MAAMI,EAAeH,GAAUE,EAAM,QAAU,SAAW,QAC1D,OAAO,KAAKH,EAAMI,CAAY,CAC/B,KAAO,CACN,MAAMC,EAAgB,GAAGL,EAAK,WAAW,GAAG,EAAI,GAAK,GAAG,GAAGA,CAAI,GAC1DG,EAAM,QAOV,OAAO,KAAK,OAAO,SAAS,OAASE,EAAe,QAAQ,EANxDN,EACHA,EAAO,KAAK,OAAO,SAAS,OAASM,CAAa,EAElD,OAAO,KAAK,OAAO,SAAS,OAASA,EAAe,OAAO,CAK9D,CACD,EAEA,OACCC,EAAAA,IAACC,EAAA,CAAc,QAASL,EACtB,WAAyB,SAC3B,CAEF,EAEaK,EAAgBC,~~EAAO~~;AAAA;AAAA"}
1	+ {"version":3,"file":"NavigationHyperlink.js","sources":["../../../../src/components/navigation-hyperlink/NavigationHyperlink.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport styled from 'styled-components';\n\nexport interface NavigationHyperlinkProps {\n\trouter: any;\n\thref: string;\n\tchildren?: ReactNode;\n\tnewTab?: boolean;\n}\n\nexport const NavigationHyperlink: React.FC<NavigationHyperlinkProps> = (\n\tnavigationHyperlinkProps,\n) => {\n\tconst { router, href, newTab } = navigationHyperlinkProps;\n\n\tconst onNavigation = (event) => {\n\t\tconst isExternal = href.includes('http');\n\t\tif (isExternal) {\n\t\t\tconst openInNewTab = newTab \|\| event.metaKey ? '_blank' : '_self';\n\t\t\twindow.open(href, openInNewTab);\n\t\t} else {\n\t\t\tconst formattedHref = `${href.startsWith('/') ? '' : '/'}${href}`;\n\t\t\tif (!event.metaKey) {\n\t\t\t\tif (router) {\n\t\t\t\t\trouter.push(window.location.origin + formattedHref);\n\t\t\t\t} else {\n\t\t\t\t\twindow.open(window.location.origin + formattedHref, '_self');\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\twindow.open(window.location.origin + formattedHref, '_blank');\n\t\t\t}\n\t\t}\n\t};\n\n\treturn (\n\t\t<NaLinkWrapper onClick={onNavigation}>\n\t\t\t{navigationHyperlinkProps.children}\n\t\t</NaLinkWrapper>\n\t);\n};\n\nexport const NaLinkWrapper = styled.div`\n\t//\tdisplay: inline-block;\n`;\n"],"names":["NavigationHyperlink","navigationHyperlinkProps","router","href","newTab","onNavigation","event","openInNewTab","formattedHref","jsx","NaLinkWrapper","styled"],"mappings":"mNAUaA,EACZC,GACI,CACJ,KAAM,CAAE,OAAAC,EAAQ,KAAAC,EAAM,OAAAC,CAAA,EAAWH,EAE3BI,EAAgBC,GAAU,CAE/B,GADmBH,EAAK,SAAS,MAAM,EACvB,CACf,MAAMI,EAAeH,GAAUE,EAAM,QAAU,SAAW,QAC1D,OAAO,KAAKH,EAAMI,CAAY,CAC/B,KAAO,CACN,MAAMC,EAAgB,GAAGL,EAAK,WAAW,GAAG,EAAI,GAAK,GAAG,GAAGA,CAAI,GAC1DG,EAAM,QAOV,OAAO,KAAK,OAAO,SAAS,OAASE,EAAe,QAAQ,EANxDN,EACHA,EAAO,KAAK,OAAO,SAAS,OAASM,CAAa,EAElD,OAAO,KAAK,OAAO,SAAS,OAASA,EAAe,OAAO,CAK9D,CACD,EAEA,OACCC,EAAAA,IAACC,EAAA,CAAc,QAASL,EACtB,WAAyB,SAC3B,CAEF,EAEaK,EAAgBC,EAAAA,QAAO;AAAA;AAAA"}

package/dist/cjs/components/pagination/Pagination.styled.js CHANGED Viewed

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),e=t.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),n=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},a=n(e),i=a.default.div`
 	display: flex;
 	align-items: center;
 	justify-content: start;
 	column-gap: 16px;
 	width: 100%;
-`;exports.Pagination=e;
+`;exports.Pagination=i;
 //# sourceMappingURL=Pagination.styled.js.map

package/dist/cjs/components/pagination/Pagination.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.styled.js","sources":["../../../../src/components/pagination/Pagination.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Pagination = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 16px;\n\twidth: 100%;\n`;\n"],"names":["Pagination","styled"],"mappings":"~~qHAEaA~~,EAAaC,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"Pagination.styled.js","sources":["../../../../src/components/pagination/Pagination.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const Pagination = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: start;\n\tcolumn-gap: 16px;\n\twidth: 100%;\n`;\n"],"names":["Pagination","styled"],"mappings":"oLAEaA,EAAaC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/plans/SubscriptionPlanSelector.js CHANGED Viewed

@@ -1,12 +1,12 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),x=require("../../assets/icons/check.svg.js"),h=require("../../assets/icons/info.svg.js"),g=require("../../assets/icons/phone.svg.js"),s=require("styled-components"),m=require("./SubscriptionPlan.js"),n=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),b=require("../modals/styledModal.js"),y=require("../tabs/Tabs.js"),j=require("../button/Button.js"),f=s.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),x=require("../../assets/icons/check.svg.js"),h=require("../../assets/icons/info.svg.js"),g=require("../../assets/icons/phone.svg.js"),m=require("styled-components"),b=require("./SubscriptionPlan.js"),n=require("../../constants/Theme.js"),o=require("../TypographyStyle.js"),y=require("../modals/styledModal.js"),f=require("../tabs/Tabs.js"),j=require("../button/Button.js"),C=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=C(m),v=s.default.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
 	padding: 24px;
-`,C=s.div`
+`,w=s.default.div`
 	color: ${n.COLORS.content.negative};
 	padding: 0px 24px;
-`,c=s.div`
+`,d=s.default.div`
 	padding: 24px 24px 0px 24px;
 	display: flex;
 	align-items: center;
@@ -15,7 +15,7 @@
 		margin-top: 8px;
 		color: ${n.COLORS.content.secondary} !important;
 	}
-`,d=s.div`
+`,c=s.default.div`
 	padding: 0px 24px 24px 24px;
 	display: flex;
 	align-items: center;
@@ -98,5 +98,5 @@
 		justify-content: flex-start;
 		gap: 8px;
 	}
-`,l=[{key:"Monthly",title:"Monthly"},{key:"yearly",title:"Yearly"}],v=e=>{const[u,r]=a.useState(e.discountInputProperties?.defaultValue),p=e.staticWidthMultiplier?e.staticWidthMultiplier:275;return t.jsxs(b.StyledModal,{centralContainerStyles:{width:e.plans.length*p},open:!0,closeOnOutsideClick:!0,onClose:e.onClose,children:[t.jsxs(c,{children:[t.jsxs("div",{children:[t.jsx(o.TitleMedium,{children:e.header||"Select a plan to proceed"}),t.jsx(o.BodyPrimary,{className:"sub--header",children:e.subHeader||""})]}),e.showMonthlyTabs?t.jsx(y.Tabs,{tabs:e.tabProperties&&e.tabProperties.tabs?e.tabProperties.tabs:l,onTabSelected:i=>e.tabProperties?.onTabSelected?e.tabProperties?.onTabSelected(i):"",isSquared:!0}):t.jsx(t.Fragment,{})]}),e.warningDescription&&t.jsx(C,{children:e.warningDescription}),t.jsx(f,{children:e.plans.map(i=>a.createElement(m.SubscriptionPlan,{...i,showMonthly:!0,showMonthlyOptions:e.showMonthlyOptions||!1,showTrialOptions:e.showTrialOptions||!1,onPlanSelect:e.onPlanSelect,key:i.planName}))}),(e.showCouponApplicationCode||e.showBookAdemo)&&t.jsxs(d,{children:[t.jsx("div",{children:e.showCouponApplicationCode&&t.jsxs("div",{className:"coupon-code",children:[t.jsxs("div",{className:"coupon-input",children:[t.jsx(o.BodyPrimary,{style:{color:e.discountInputProperties?.errorMessage?n.COLORS.content.negative:""},children:"Apply coupon code"}),t.jsxs("div",{className:"button--wrapper",children:[t.jsxs("div",{className:e.discountInputProperties?.errorMessage?"error--border dotted--border":"dotted--border",children:[t.jsx("input",{className:"input--class",onChange:i=>{r(i.target.value),e.discountInputProperties?.onChangeText(i.target.value)},value:u,placeholder:"eg:PLAN20",disabled:e.discountInputProperties?.isLoading}),e.discountInputProperties?.successText&&t.jsxs("div",{className:"success--inside--chip",children:[t.jsx(x.default,{height:16,width:16,color:n.COLORS.content.primaryInverse}),t.jsx(o.BodyCaption,{style:{color:n.COLORS.content.primaryInverse},children:"Coupon applied"})]})]}),!e.discountInputProperties?.successText&&t.jsx(j.Button,{buttonText:"Apply",buttonType:"primary",onClick:e?.discountInputProperties?.onCouponApply,isLoading:e.discountInputProperties?.isLoading})]}),e.discountInputProperties?.errorMessage&&t.jsxs("div",{className:"d-flex",style:{gap:8},children:[t.jsx(h.default,{height:16,width:16,color:n.COLORS.content.negative}),t.jsx(o.BodyCaption,{style:{color:n.COLORS.content.negative},children:e.discountInputProperties?.errorMessage??"Enter a valid code"})]}),e.discountInputProperties?.showRemoveCoupon&&t.jsx("div",{className:"demo--input",onClick:()=>{r(""),e.discountInputProperties?.removeCoupon&&e.discountInputProperties?.removeCoupon()},children:"Remove coupon"})]}),e.discountInputProperties?.successText&&t.jsx("div",{className:"coupon--success--chip",children:t.jsx(o.BodyCaption,{style:{color:"#00580E",maxWidth:180},children:e.discountInputProperties?.successText})})]})}),e.showBookAdemo&&t.jsxs("div",{className:"demo--wrapper",children:[t.jsx("div",{className:"demo--phone",children:t.jsx(g.default,{height:16,width:16,color:n.COLORS.background.brand})}),t.jsx(o.BodyPrimary,{className:"demo--input",onClick:()=>e.demoLink?window.open(e.demoLink,"_blank"):e.onClickingBookADemo?e.onClickingBookADemo():"",children:"Book a demo with the team"})]})]})]})};exports.BottomWrapper=d;exports.HeaderWrapper=c;exports.SubscriptionPlanSelector=v;exports.defaultTabs=l;
+`,l=[{key:"Monthly",title:"Monthly"},{key:"yearly",title:"Yearly"}],O=e=>{const[u,r]=a.useState(e.discountInputProperties?.defaultValue),p=e.staticWidthMultiplier?e.staticWidthMultiplier:275;return t.jsxs(y.StyledModal,{centralContainerStyles:{width:e.plans.length*p},open:!0,closeOnOutsideClick:!0,onClose:e.onClose,children:[t.jsxs(d,{children:[t.jsxs("div",{children:[t.jsx(o.TitleMedium,{children:e.header||"Select a plan to proceed"}),t.jsx(o.BodyPrimary,{className:"sub--header",children:e.subHeader||""})]}),e.showMonthlyTabs?t.jsx(f.Tabs,{tabs:e.tabProperties&&e.tabProperties.tabs?e.tabProperties.tabs:l,onTabSelected:i=>e.tabProperties?.onTabSelected?e.tabProperties?.onTabSelected(i):"",isSquared:!0}):t.jsx(t.Fragment,{})]}),e.warningDescription&&t.jsx(w,{children:e.warningDescription}),t.jsx(v,{children:e.plans.map(i=>a.createElement(b.SubscriptionPlan,{...i,showMonthly:!0,showMonthlyOptions:e.showMonthlyOptions||!1,showTrialOptions:e.showTrialOptions||!1,onPlanSelect:e.onPlanSelect,key:i.planName}))}),(e.showCouponApplicationCode||e.showBookAdemo)&&t.jsxs(c,{children:[t.jsx("div",{children:e.showCouponApplicationCode&&t.jsxs("div",{className:"coupon-code",children:[t.jsxs("div",{className:"coupon-input",children:[t.jsx(o.BodyPrimary,{style:{color:e.discountInputProperties?.errorMessage?n.COLORS.content.negative:""},children:"Apply coupon code"}),t.jsxs("div",{className:"button--wrapper",children:[t.jsxs("div",{className:e.discountInputProperties?.errorMessage?"error--border dotted--border":"dotted--border",children:[t.jsx("input",{className:"input--class",onChange:i=>{r(i.target.value),e.discountInputProperties?.onChangeText(i.target.value)},value:u,placeholder:"eg:PLAN20",disabled:e.discountInputProperties?.isLoading}),e.discountInputProperties?.successText&&t.jsxs("div",{className:"success--inside--chip",children:[t.jsx(x.default,{height:16,width:16,color:n.COLORS.content.primaryInverse}),t.jsx(o.BodyCaption,{style:{color:n.COLORS.content.primaryInverse},children:"Coupon applied"})]})]}),!e.discountInputProperties?.successText&&t.jsx(j.Button,{buttonText:"Apply",buttonType:"primary",onClick:e?.discountInputProperties?.onCouponApply,isLoading:e.discountInputProperties?.isLoading})]}),e.discountInputProperties?.errorMessage&&t.jsxs("div",{className:"d-flex",style:{gap:8},children:[t.jsx(h.default,{height:16,width:16,color:n.COLORS.content.negative}),t.jsx(o.BodyCaption,{style:{color:n.COLORS.content.negative},children:e.discountInputProperties?.errorMessage??"Enter a valid code"})]}),e.discountInputProperties?.showRemoveCoupon&&t.jsx("div",{className:"demo--input",onClick:()=>{r(""),e.discountInputProperties?.removeCoupon&&e.discountInputProperties?.removeCoupon()},children:"Remove coupon"})]}),e.discountInputProperties?.successText&&t.jsx("div",{className:"coupon--success--chip",children:t.jsx(o.BodyCaption,{style:{color:"#00580E",maxWidth:180},children:e.discountInputProperties?.successText})})]})}),e.showBookAdemo&&t.jsxs("div",{className:"demo--wrapper",children:[t.jsx("div",{className:"demo--phone",children:t.jsx(g.default,{height:16,width:16,color:n.COLORS.background.brand})}),t.jsx(o.BodyPrimary,{className:"demo--input",onClick:()=>e.demoLink?window.open(e.demoLink,"_blank"):e.onClickingBookADemo?e.onClickingBookADemo():"",children:"Book a demo with the team"})]})]})]})};exports.BottomWrapper=c;exports.HeaderWrapper=d;exports.SubscriptionPlanSelector=O;exports.defaultTabs=l;
 //# sourceMappingURL=SubscriptionPlanSelector.js.map

package/dist/cjs/components/plans/SubscriptionPlanSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext.target.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext.target.value,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}

package/dist/cjs/components/plans/SubscriptionPlanStyled.js CHANGED Viewed

@@ -1,17 +1,17 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),o=require("../../constants/Theme.js"),r=e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("../../constants/Theme.js"),a=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},e=a(r),i=e.default.div`
 	position: relative;
-	border: 1px solid ${o.COLORS.stroke.primary};
+	border: 1px solid ${t.COLORS.stroke.primary};
 	border: 1px solid
-		${t=>t.isSelected?o.COLORS.text.altSecondary:o.COLORS.stroke.primary};
+		${o=>o.isSelected?t.COLORS.text.altSecondary:t.COLORS.stroke.primary};
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
 	border-radius: 4px;
 	.box {
-		height: ${t=>t.isManifestPlan?"400px":"600px"};
+		height: ${o=>o.isManifestPlan?"400px":"600px"};
 		padding: 24px;
-		background-color: ${o.COLORS.surface.standard};
+		background-color: ${t.COLORS.surface.standard};
 		display: flex;
 		flex-direction: column;
@@ -22,7 +22,7 @@
 	}
 	.box.selected {
-		background-color: ${o.COLORS.background.brandLight};
+		background-color: ${t.COLORS.background.brandLight};
 	}
 	.rounded-corners {
@@ -43,7 +43,7 @@
 		align-items: center;
 		.text {
-			color: ${o.COLORS.surface.standard};
+			color: ${t.COLORS.surface.standard};
 		}
 	}
@@ -52,12 +52,12 @@
 		margin-bottom: 12px;
 		padding: 4px 8px;
 		border-radius: 4px;
-		color: ${o.COLORS.content.secondary};
-		background-color: ${o.COLORS.surface.hovered};
+		color: ${t.COLORS.content.secondary};
+		background-color: ${t.COLORS.surface.hovered};
 	}
 	.trial.selected {
-		background-color: ${o.COLORS.surface.standard};
+		background-color: ${t.COLORS.surface.standard};
 	}
 	.feature {
@@ -66,7 +66,7 @@
 		.feature-text {
 			margin-left: 12px;
-			color: ${o.COLORS.content.secondary};
+			color: ${t.COLORS.content.secondary};
 		}
 		margin-top: 4px;
@@ -85,11 +85,11 @@
 	.plan-bottom-information {
 		margin-top: auto;
 		text-align: center;
-		background: ${o.COLORS.background.brandLight};
+		background: ${t.COLORS.background.brandLight};
 		padding: 4px;
 		.text {
-			color: ${o.COLORS.background.inverse};
+			color: ${t.COLORS.background.inverse};
 		}
 		border-bottom-left-radius: 4px;
@@ -98,36 +98,36 @@
 	.disabled {
 		* {
-			color: ${o.COLORS.content.inactive} !important;
+			color: ${t.COLORS.content.inactive} !important;
 		}
 	}
 	.plan-bottom-information.disabled {
-		background: ${o.COLORS.background.base};
+		background: ${t.COLORS.background.base};
 	}
 	.plan-bottom-information.selected {
-		background: ${o.COLORS.surface.standard};
-		color: ${o.COLORS.content.placeholder};
+		background: ${t.COLORS.surface.standard};
+		color: ${t.COLORS.content.placeholder};
 	}
 	.old--price {
-		color: ${o.COLORS.content.secondary};
+		color: ${t.COLORS.content.secondary};
 		text-decoration: line-through;
 		margin-right: 4px;
 	}
-`,a=e.div`
+`,n=e.default.div`
 	position: relative;
 	cursor: pointer;
-	border: 1px solid ${o.COLORS.stroke.primary};
-	box-shadow: ${t=>t.showMostPopularChip?"0px 0px 12px 0px rgba(116, 0, 255, 0.24)":""};
+	border: 1px solid ${t.COLORS.stroke.primary};
+	box-shadow: ${o=>o.showMostPopularChip?"0px 0px 12px 0px rgba(116, 0, 255, 0.24)":""};
 	border-radius: 8px;
 	width: 100;
 	.box {
 		border-radius: 8px;
-		min-height: ${t=>t.height?t.height:"525px"};
+		min-height: ${o=>o.height?o.height:"525px"};
 		padding: 16px;
-		background-color: ${o.COLORS.surface.standard};
+		background-color: ${t.COLORS.surface.standard};
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
@@ -143,12 +143,12 @@
 		margin-bottom: 12px;
 		padding: 4px 8px;
 		border-radius: 4px;
-		color: ${o.COLORS.content.secondary};
-		background-color: ${o.COLORS.surface.hovered};
+		color: ${t.COLORS.content.secondary};
+		background-color: ${t.COLORS.surface.hovered};
 	}
 	.trial.selected {
-		background-color: ${o.COLORS.surface.standard};
+		background-color: ${t.COLORS.surface.standard};
 	}
 	.features {
 		display: flex;
@@ -163,7 +163,7 @@
 		flex-direction: row;
 		.feature-text {
-			color: ${o.COLORS.content.secondary};
+			color: ${t.COLORS.content.secondary};
 		}
 	}
@@ -179,11 +179,11 @@
 	.plan-bottom-information {
 		margin-top: auto;
 		text-align: center;
-		background: ${o.COLORS.background.brandLight};
+		background: ${t.COLORS.background.brandLight};
 		padding: 4px;
 		.text {
-			color: ${o.COLORS.background.inverse};
+			color: ${t.COLORS.background.inverse};
 		}
 		border-bottom-left-radius: 4px;
@@ -192,20 +192,20 @@
 	.disabled {
 		* {
-			color: ${o.COLORS.content.inactive} !important;
+			color: ${t.COLORS.content.inactive} !important;
 		}
 	}
 	.plan-bottom-information.disabled {
-		background: ${o.COLORS.background.base};
+		background: ${t.COLORS.background.base};
 	}
 	.plan-bottom-information.selected {
-		background: ${o.COLORS.surface.standard};
-		color: ${o.COLORS.content.placeholder};
+		background: ${t.COLORS.surface.standard};
+		color: ${t.COLORS.content.placeholder};
 	}
 	.old--price {
-		color: ${o.COLORS.content.secondary};
+		color: ${t.COLORS.content.secondary};
 		text-decoration: line-through;
 		margin-right: 4px;
 	}
@@ -223,7 +223,7 @@
 		gap: 4px;
 	}
 	.popular-text {
-		color: ${o.COLORS.surface.subdued};
+		color: ${t.COLORS.surface.subdued};
 		font-size: 10.345px;
 	}
 	.radio-flex {
@@ -239,7 +239,7 @@
 		font-size: 14px;
 		font-style: normal;
 		font-weight: 400;
-		color: ${o.COLORS.content.secondary};
+		color: ${t.COLORS.content.secondary};
 	}
 	.popular-testimony {
 		display: flex;
@@ -247,7 +247,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 8px;
-		background: ${o.COLORS.background.brandLight};
+		background: ${t.COLORS.background.brandLight};
 	}
 	.testimony-text {
 		font-size: 12px;
@@ -261,7 +261,7 @@
 	}
 	input[type='radio'] {
-		accent-color: ${o.COLORS.stroke.positive.vibrant};
+		accent-color: ${t.COLORS.stroke.positive.vibrant};
 	}
-`;exports.NewSubscriptionStyled=a;exports.SubscriptionPlanStyled=r;
+`;exports.NewSubscriptionStyled=n;exports.SubscriptionPlanStyled=i;
 //# sourceMappingURL=SubscriptionPlanStyled.js.map

package/dist/cjs/components/plans/SubscriptionPlanStyled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionPlanStyled.js","sources":["../../../../src/components/plans/SubscriptionPlanStyled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SubscriptionPlanStyled = styled.div<{\n\tisSelected: boolean;\n\tisManifestPlan?: boolean;\n}>`\n\tposition: relative;\n\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isSelected ? COLORS.text.altSecondary : COLORS.stroke.primary};\n\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\n\t.box {\n\t\theight: ${(props) => (props.isManifestPlan ? '400px' : '600px')};\n\t\tpadding: 24px;\n\t\tbackground-color: ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t.button-box {\n\t\t\tmargin-top: auto;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n\n\t.box.selected {\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\n\t.rounded-corners {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\twidth: 100%;\n\n\t.most-popular {\n\t\tbackground: linear-gradient(90.05deg, #743979 1.22%, #526dca 99.95%),\n\t\t\t#4b1583;\n\t\tpadding: 4px;\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.surface.standard};\n\t\t}\n\t}\n\n\t.trial {\n\t\tmargin-top: 16px;\n\t\tmargin-bottom: 12px;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n\n\t.trial.selected {\n\t\tbackground-color: ${COLORS.surface.standard};\n\t}\n\n\t.feature {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t.feature-text {\n\t\t\tmargin-left: 12px;\n\t\t\tcolor: ${COLORS.content.secondary};\n\t\t}\n\n\t\tmargin-top: 4px;\n\t}\n\n\t.price-block {\n\t\tdisplay: flex;\n\t\tmargin-bottom: 4px;\n\t\talign-items: center;\n\t}\n\n\t.per-message-price {\n\t\tdisplay: flex;\n\t}\n\n\t.plan-bottom-information {\n\t\tmargin-top: auto;\n\t\ttext-align: center;\n\t\tbackground: ${COLORS.background.brandLight};\n\t\tpadding: 4px;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.background.inverse};\n\t\t}\n\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.disabled {\n\t\t* {\n\t\t\tcolor: ${COLORS.content.inactive} !important;\n\t\t}\n\t}\n\n\t.plan-bottom-information.disabled {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.plan-bottom-information.selected {\n\t\tbackground: ${COLORS.surface.standard};\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\t.old--price {\n\t\tcolor: ${COLORS.content.secondary};\n\t\ttext-decoration: line-through;\n\t\tmargin-right: 4px;\n\t}\n`;\n\nexport const NewSubscriptionStyled = styled.div<{\n\tshowMostPopularChip: boolean;\n\theight?: string;\n}>`\n\tposition: relative;\n\tcursor: pointer;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: ${(props) =>\n\t\tprops.showMostPopularChip\n\t\t\t? '0px 0px 12px 0px rgba(116, 0, 255, 0.24)'\n\t\t\t: ''};\n\tborder-radius: 8px;\n\twidth: 100;\n\n\t.box {\n\t\tborder-radius: 8px;\n\t\tmin-height: ${(props) => (props.height ? props.height : '525px')};\n\t\tpadding: 16px;\n\t\tbackground-color: ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 12px;\n\n\t\t.button-box {\n\t\t\tmargin-top: auto;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n\n\t.trial {\n\t\tmargin-top: 16px;\n\t\tmargin-bottom: 12px;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n\n\t.trial.selected {\n\t\tbackground-color: ${COLORS.surface.standard};\n\t}\n\t.features {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t}\n\t.feature {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 9px;\n\t\tjustify-content: flex-start;\n\t\tflex-direction: row;\n\n\t\t.feature-text {\n\t\t\tcolor: ${COLORS.content.secondary};\n\t\t}\n\t}\n\n\t.price-block {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.per-message-price {\n\t\tdisplay: flex;\n\t}\n\n\t.plan-bottom-information {\n\t\tmargin-top: auto;\n\t\ttext-align: center;\n\t\tbackground: ${COLORS.background.brandLight};\n\t\tpadding: 4px;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.background.inverse};\n\t\t}\n\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.disabled {\n\t\t* {\n\t\t\tcolor: ${COLORS.content.inactive} !important;\n\t\t}\n\t}\n\n\t.plan-bottom-information.disabled {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.plan-bottom-information.selected {\n\t\tbackground: ${COLORS.surface.standard};\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\t.old--price {\n\t\tcolor: ${COLORS.content.secondary};\n\t\ttext-decoration: line-through;\n\t\tmargin-right: 4px;\n\t}\n\t.most-popular-chip {\n\t\tborder-radius: 25px 25px 0px 0px;\n\t\tbackground: linear-gradient(180deg, #28034e -0.65%, #731dcf 99.55%);\n\t\tposition: absolute;\n\t\tpadding: 7px 18px 5px 18px;\n\t\ttop: -28px;\n\t\tright: 16px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 4px;\n\t}\n\t.popular-text {\n\t\tcolor: ${COLORS.surface.subdued};\n\t\tfont-size: 10.345px;\n\t}\n\t.radio-flex {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.extra-include-margin {\n\t\tmargin-top: 8px;\n\t}\n\t.buisness-desc {\n\t\tfont-size: 14px;\n\t\tfont-style: normal;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\t.popular-testimony {\n\t\tdisplay: flex;\n\t\tpadding: 12px;\n\t\talign-items: flex-start;\n\t\tgap: 12px;\n\t\tborder-radius: 8px;\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\t.testimony-text {\n\t\tfont-size: 12px;\n\t\tfont-style: normal;\n\t\tfont-weight: 600;\n\t\tline-height: 16px;\n\t}\n\t.radio-button {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t}\n\n\tinput[type='radio'] {\n\t\taccent-color: ${COLORS.stroke.positive.vibrant};\n\t}\n`;\n"],"names":["SubscriptionPlanStyled","styled","COLORS","props","NewSubscriptionStyled"],"mappings":"~~2JAGaA~~,EAAyBC,~~EAAO~~;AAAA;AAAA;AAAA,qBAMxBC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,IAErCC,GACFA,EAAM,WAAaD,EAAAA,OAAO,KAAK,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMzDC,GAAWA,EAAM,eAAiB,QAAU,OAAQ;AAAA;AAAA,sBAE3CD,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAWvBA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAqBtCA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASxBA,EAAAA,OAAO,QAAQ,SAAS;AAAA,sBACbA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,sBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASjCA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAmBpBA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,YAIhCA,EAAAA,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASzBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKnBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,WAC5BA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,WAG1BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA,EAMtBE,EAAwBH,~~EAAO~~;AAAA;AAAA;AAAA,qBAMvBC,EAAAA,OAAO,OAAO,OAAO;AAAA,eAC1BC,GACdA,EAAM,oBACH,2CACA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMUA,GAAWA,EAAM,OAASA,EAAM,OAAS,OAAQ;AAAA;AAAA,sBAE5CD,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBlCA,EAAAA,OAAO,QAAQ,SAAS;AAAA,sBACbA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA,sBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAejCA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgBpBA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA,YAIhCA,EAAAA,OAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YASzBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKnBA,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA,gBAItBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA,WAC5BA,EAAAA,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,WAG1BA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAkBxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAgBtBA,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAQnBA,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAc1BA,SAAO,OAAO,SAAS,OAAO;AAAA;AAAA"}
1	+ {"version":3,"file":"SubscriptionPlanStyled.js","sources":["../../../../src/components/plans/SubscriptionPlanStyled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const SubscriptionPlanStyled = styled.div<{\n\tisSelected: boolean;\n\tisManifestPlan?: boolean;\n}>`\n\tposition: relative;\n\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isSelected ? COLORS.text.altSecondary : COLORS.stroke.primary};\n\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\n\t.box {\n\t\theight: ${(props) => (props.isManifestPlan ? '400px' : '600px')};\n\t\tpadding: 24px;\n\t\tbackground-color: ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\n\t\t.button-box {\n\t\t\tmargin-top: auto;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n\n\t.box.selected {\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\n\t.rounded-corners {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\twidth: 100%;\n\n\t.most-popular {\n\t\tbackground: linear-gradient(90.05deg, #743979 1.22%, #526dca 99.95%),\n\t\t\t#4b1583;\n\t\tpadding: 4px;\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.surface.standard};\n\t\t}\n\t}\n\n\t.trial {\n\t\tmargin-top: 16px;\n\t\tmargin-bottom: 12px;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n\n\t.trial.selected {\n\t\tbackground-color: ${COLORS.surface.standard};\n\t}\n\n\t.feature {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t.feature-text {\n\t\t\tmargin-left: 12px;\n\t\t\tcolor: ${COLORS.content.secondary};\n\t\t}\n\n\t\tmargin-top: 4px;\n\t}\n\n\t.price-block {\n\t\tdisplay: flex;\n\t\tmargin-bottom: 4px;\n\t\talign-items: center;\n\t}\n\n\t.per-message-price {\n\t\tdisplay: flex;\n\t}\n\n\t.plan-bottom-information {\n\t\tmargin-top: auto;\n\t\ttext-align: center;\n\t\tbackground: ${COLORS.background.brandLight};\n\t\tpadding: 4px;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.background.inverse};\n\t\t}\n\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.disabled {\n\t\t* {\n\t\t\tcolor: ${COLORS.content.inactive} !important;\n\t\t}\n\t}\n\n\t.plan-bottom-information.disabled {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.plan-bottom-information.selected {\n\t\tbackground: ${COLORS.surface.standard};\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\t.old--price {\n\t\tcolor: ${COLORS.content.secondary};\n\t\ttext-decoration: line-through;\n\t\tmargin-right: 4px;\n\t}\n`;\n\nexport const NewSubscriptionStyled = styled.div<{\n\tshowMostPopularChip: boolean;\n\theight?: string;\n}>`\n\tposition: relative;\n\tcursor: pointer;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tbox-shadow: ${(props) =>\n\t\tprops.showMostPopularChip\n\t\t\t? '0px 0px 12px 0px rgba(116, 0, 255, 0.24)'\n\t\t\t: ''};\n\tborder-radius: 8px;\n\twidth: 100;\n\n\t.box {\n\t\tborder-radius: 8px;\n\t\tmin-height: ${(props) => (props.height ? props.height : '525px')};\n\t\tpadding: 16px;\n\t\tbackground-color: ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 12px;\n\n\t\t.button-box {\n\t\t\tmargin-top: auto;\n\t\t\tdisplay: flex;\n\t\t}\n\t}\n\n\t.trial {\n\t\tmargin-top: 16px;\n\t\tmargin-bottom: 12px;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tcolor: ${COLORS.content.secondary};\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n\n\t.trial.selected {\n\t\tbackground-color: ${COLORS.surface.standard};\n\t}\n\t.features {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 2px;\n\t}\n\t.feature {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tgap: 9px;\n\t\tjustify-content: flex-start;\n\t\tflex-direction: row;\n\n\t\t.feature-text {\n\t\t\tcolor: ${COLORS.content.secondary};\n\t\t}\n\t}\n\n\t.price-block {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t.per-message-price {\n\t\tdisplay: flex;\n\t}\n\n\t.plan-bottom-information {\n\t\tmargin-top: auto;\n\t\ttext-align: center;\n\t\tbackground: ${COLORS.background.brandLight};\n\t\tpadding: 4px;\n\n\t\t.text {\n\t\t\tcolor: ${COLORS.background.inverse};\n\t\t}\n\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.disabled {\n\t\t* {\n\t\t\tcolor: ${COLORS.content.inactive} !important;\n\t\t}\n\t}\n\n\t.plan-bottom-information.disabled {\n\t\tbackground: ${COLORS.background.base};\n\t}\n\n\t.plan-bottom-information.selected {\n\t\tbackground: ${COLORS.surface.standard};\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n\t.old--price {\n\t\tcolor: ${COLORS.content.secondary};\n\t\ttext-decoration: line-through;\n\t\tmargin-right: 4px;\n\t}\n\t.most-popular-chip {\n\t\tborder-radius: 25px 25px 0px 0px;\n\t\tbackground: linear-gradient(180deg, #28034e -0.65%, #731dcf 99.55%);\n\t\tposition: absolute;\n\t\tpadding: 7px 18px 5px 18px;\n\t\ttop: -28px;\n\t\tright: 16px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tgap: 4px;\n\t}\n\t.popular-text {\n\t\tcolor: ${COLORS.surface.subdued};\n\t\tfont-size: 10.345px;\n\t}\n\t.radio-flex {\n\t\tdisplay: flex;\n\t\talign-items: baseline;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.extra-include-margin {\n\t\tmargin-top: 8px;\n\t}\n\t.buisness-desc {\n\t\tfont-size: 14px;\n\t\tfont-style: normal;\n\t\tfont-weight: 400;\n\t\tcolor: ${COLORS.content.secondary};\n\t}\n\t.popular-testimony {\n\t\tdisplay: flex;\n\t\tpadding: 12px;\n\t\talign-items: flex-start;\n\t\tgap: 12px;\n\t\tborder-radius: 8px;\n\t\tbackground: ${COLORS.background.brandLight};\n\t}\n\t.testimony-text {\n\t\tfont-size: 12px;\n\t\tfont-style: normal;\n\t\tfont-weight: 600;\n\t\tline-height: 16px;\n\t}\n\t.radio-button {\n\t\twidth: 18px;\n\t\theight: 18px;\n\t}\n\n\tinput[type='radio'] {\n\t\taccent-color: ${COLORS.stroke.positive.vibrant};\n\t}\n`;\n"],"names":["SubscriptionPlanStyled","styled","COLORS","props","NewSubscriptionStyled"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),d=require("styled-components"),o=require("./NewSubscriptionPlan.js"),h=d.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),d=require("styled-components"),o=require("./NewSubscriptionPlan.js"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},h=r(d),u=h.default.div`
 	display: flex;
 	column-gap: 22px;
 	align-items: stretch;
@@ -16,5 +16,5 @@
 	&::-webkit-scrollbar-thumb:horizontal {
 		width: 8px;
 	}
-`,r=e=>{const[a,c]=n.useState(e.selectedPlan??"");return i.jsx(h,{style:{padding:"28px 0px 5px 0px"},maxWidth:e.maxWidth,children:e.plans.map((t,s)=>i.jsx("div",{style:{minWidth:e.staticWidth??280,maxWidth:e.staticWidth??280},children:n.createElement(o.NewSubscriptionPlan,{...t,showMonthly:!0,showMonthlyOptions:e.selectedTab=="monthly",showTrialOptions:e.showTrialOptions||!1,onPlanSelect:l=>{e.onPlanSelect(l),c(l)},key:t.planName,isPlanSelected:a==(e.selectedTab=="monthly"?t.code:t.yearlyCode),onClickShowAllFeatures:e.onClickShowAllFeatures,showSelectedPlanChip:e.currentPlan==(e.selectedTab=="monthly"?t.code:t.yearlyCode),minHeightOfFeatures:e.minHeightOfFeatures})},s))})};exports.SubscriptionPlansCollected=r;
+`,b=e=>{const[n,c]=i.useState(e.selectedPlan??"");return a.jsx(u,{style:{padding:"28px 0px 5px 0px"},maxWidth:e.maxWidth,children:e.plans.map((t,s)=>a.jsx("div",{style:{minWidth:e.staticWidth??280,maxWidth:e.staticWidth??280},children:i.createElement(o.NewSubscriptionPlan,{...t,showMonthly:!0,showMonthlyOptions:e.selectedTab=="monthly",showTrialOptions:e.showTrialOptions||!1,onPlanSelect:l=>{e.onPlanSelect(l),c(l)},key:t.planName,isPlanSelected:n==(e.selectedTab=="monthly"?t.code:t.yearlyCode),onClickShowAllFeatures:e.onClickShowAllFeatures,showSelectedPlanChip:e.currentPlan==(e.selectedTab=="monthly"?t.code:t.yearlyCode),minHeightOfFeatures:e.minHeightOfFeatures})},s))})};exports.SubscriptionPlansCollected=b;
 //# sourceMappingURL=SubscriptionPlansCollected.js.map

package/dist/cjs/components/plans/SubscriptionPlansCollected.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionPlansCollected.js","sources":["../../../../src/components/plans/SubscriptionPlansCollected.tsx"],"sourcesContent":["import { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tNewSubscriptionPlan,\n\tNewSubscriptionPlanProps,\n} from './NewSubscriptionPlan';\n\ntype Props = {\n\tplans: NewSubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClickShowAllFeatures?: () => void;\n\tshowTrialOptions?: boolean;\n\tstaticWidth?: string;\n\tselectedTab?: 'monthly' \| 'annually';\n\tselectedPlan?: string;\n\tcurrentPlan?: string;\n\tmaxWidth?: string;\n\tminHeightOfFeatures?: number;\n};\nconst PlanWrapper = styled.div<{ maxWidth?: string }>`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\toverflow-x: scroll;\n\tmax-width: ${(props) => props.maxWidth ?? '100%'};\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #888;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n\nexport const SubscriptionPlansCollected: FunctionComponent<Props> = (props) => {\n\tconst [planSelected, setPlanSelected] = useState<string \| undefined>(\n\t\tprops.selectedPlan ?? '',\n\t);\n\treturn (\n\t\t<PlanWrapper\n\t\t\tstyle={{ padding: '28px 0px 5px 0px' }}\n\t\t\tmaxWidth={props.maxWidth}\n\t\t>\n\t\t\t{props.plans.map((prop, index) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t\tmaxWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NewSubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.selectedTab == 'monthly'}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={(code: string) => {\n\t\t\t\t\t\t\t\tprops.onPlanSelect(code);\n\t\t\t\t\t\t\t\tsetPlanSelected(code);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t\tisPlanSelected={\n\t\t\t\t\t\t\t\tplanSelected ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClickShowAllFeatures={props.onClickShowAllFeatures}\n\t\t\t\t\t\t\tshowSelectedPlanChip={\n\t\t\t\t\t\t\t\tprops.currentPlan ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tminHeightOfFeatures={props.minHeightOfFeatures}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</PlanWrapper>\n\t);\n};\n"],"names":["PlanWrapper","styled","props","SubscriptionPlansCollected","planSelected","setPlanSelected","useState","jsx","prop","index","createElement","NewSubscriptionPlan","code"],"mappings":"~~6MAmBMA~~,EAAcC,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA,cAKZC,GAAUA,EAAM,UAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAepCC,EAAwDD,GAAU,CAC9E,KAAM,CAACE,EAAcC,CAAe,EAAIC,EAAAA,SACvCJ,EAAM,cAAgB,EAAA,EAEvB,OACCK,EAAAA,IAACP,EAAA,CACA,MAAO,CAAE,QAAS,kBAAA,EAClB,SAAUE,EAAM,SAEf,SAAAA,EAAM,MAAM,IAAI,CAACM,EAAMC,IAEtBF,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAUL,EAAM,aAAe,IAC/B,SAAUA,EAAM,aAAe,GAAA,EAIhC,SAAAQ,EAAAA,cAACC,EAAAA,oBAAA,CACC,GAAGH,EACJ,YAAa,GACb,mBAAoBN,EAAM,aAAe,UACzC,iBAAkBA,EAAM,kBAAoB,GAC5C,aAAeU,GAAiB,CAC/BV,EAAM,aAAaU,CAAI,EACvBP,EAAgBO,CAAI,CACrB,EACA,IAAKJ,EAAK,SACV,eACCJ,IACCF,EAAM,aAAe,UAAYM,EAAK,KAAOA,EAAK,YAEpD,uBAAwBN,EAAM,uBAC9B,qBACCA,EAAM,cACLA,EAAM,aAAe,UAAYM,EAAK,KAAOA,EAAK,YAEpD,oBAAqBN,EAAM,mBAAA,CAAA,CAC5B,EAtBKO,CAAA,CAyBP,CAAA,CAAA,CAGJ"}
1	+ {"version":3,"file":"SubscriptionPlansCollected.js","sources":["../../../../src/components/plans/SubscriptionPlansCollected.tsx"],"sourcesContent":["import { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport {\n\tNewSubscriptionPlan,\n\tNewSubscriptionPlanProps,\n} from './NewSubscriptionPlan';\n\ntype Props = {\n\tplans: NewSubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClickShowAllFeatures?: () => void;\n\tshowTrialOptions?: boolean;\n\tstaticWidth?: string;\n\tselectedTab?: 'monthly' \| 'annually';\n\tselectedPlan?: string;\n\tcurrentPlan?: string;\n\tmaxWidth?: string;\n\tminHeightOfFeatures?: number;\n};\nconst PlanWrapper = styled.div<{ maxWidth?: string }>`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\toverflow-x: scroll;\n\tmax-width: ${(props) => props.maxWidth ?? '100%'};\n\t&::-webkit-scrollbar-thumb {\n\t\tbackground: #888;\n\t\tborder-radius: 8px;\n\t}\n\t&::-webkit-scrollbar {\n\t\theight: 5px;\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\t&::-webkit-scrollbar-thumb:horizontal {\n\t\twidth: 8px;\n\t}\n`;\n\nexport const SubscriptionPlansCollected: FunctionComponent<Props> = (props) => {\n\tconst [planSelected, setPlanSelected] = useState<string \| undefined>(\n\t\tprops.selectedPlan ?? '',\n\t);\n\treturn (\n\t\t<PlanWrapper\n\t\t\tstyle={{ padding: '28px 0px 5px 0px' }}\n\t\t\tmaxWidth={props.maxWidth}\n\t\t>\n\t\t\t{props.plans.map((prop, index) => {\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tminWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t\tmaxWidth: props.staticWidth ?? 280,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t>\n\t\t\t\t\t\t<NewSubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.selectedTab == 'monthly'}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={(code: string) => {\n\t\t\t\t\t\t\t\tprops.onPlanSelect(code);\n\t\t\t\t\t\t\t\tsetPlanSelected(code);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t\tisPlanSelected={\n\t\t\t\t\t\t\t\tplanSelected ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tonClickShowAllFeatures={props.onClickShowAllFeatures}\n\t\t\t\t\t\t\tshowSelectedPlanChip={\n\t\t\t\t\t\t\t\tprops.currentPlan ==\n\t\t\t\t\t\t\t\t(props.selectedTab == 'monthly' ? prop.code : prop.yearlyCode)\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tminHeightOfFeatures={props.minHeightOfFeatures}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t})}\n\t\t</PlanWrapper>\n\t);\n};\n"],"names":["PlanWrapper","styled","props","SubscriptionPlansCollected","planSelected","setPlanSelected","useState","jsx","prop","index","createElement","NewSubscriptionPlan","code"],"mappings":"4QAmBMA,EAAcC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,cAKZC,GAAUA,EAAM,UAAY,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAepCC,EAAwDD,GAAU,CAC9E,KAAM,CAACE,EAAcC,CAAe,EAAIC,EAAAA,SACvCJ,EAAM,cAAgB,EAAA,EAEvB,OACCK,EAAAA,IAACP,EAAA,CACA,MAAO,CAAE,QAAS,kBAAA,EAClB,SAAUE,EAAM,SAEf,SAAAA,EAAM,MAAM,IAAI,CAACM,EAAMC,IAEtBF,EAAAA,IAAC,MAAA,CACA,MAAO,CACN,SAAUL,EAAM,aAAe,IAC/B,SAAUA,EAAM,aAAe,GAAA,EAIhC,SAAAQ,EAAAA,cAACC,EAAAA,oBAAA,CACC,GAAGH,EACJ,YAAa,GACb,mBAAoBN,EAAM,aAAe,UACzC,iBAAkBA,EAAM,kBAAoB,GAC5C,aAAeU,GAAiB,CAC/BV,EAAM,aAAaU,CAAI,EACvBP,EAAgBO,CAAI,CACrB,EACA,IAAKJ,EAAK,SACV,eACCJ,IACCF,EAAM,aAAe,UAAYM,EAAK,KAAOA,EAAK,YAEpD,uBAAwBN,EAAM,uBAC9B,qBACCA,EAAM,cACLA,EAAM,aAAe,UAAYM,EAAK,KAAOA,EAAK,YAEpD,oBAAqBN,EAAM,mBAAA,CAAA,CAC5B,EAtBKO,CAAA,CAyBP,CAAA,CAAA,CAGJ"}

package/dist/cjs/components/postPicker/PostPicker.styled.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("styled-components"),i=require("../TypographyStyle.js");e.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),d=require("../TypographyStyle.js"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(i);t.default.div`
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -9,7 +9,7 @@
 	background-color: rgba(0, 0, 0, 0.5);
 	align-items: center;
 	justify-content: center;
-`;e.div`
+`;t.default.div`
 	background-color: #fff;
 	width: 1032px;
 	height: auto;
@@ -20,21 +20,21 @@
 	flex-direction: column;
 	align-items: center;
 	position: relative;
-`;e.div`
+`;t.default.div`
 	display: flex;
 	justify-content: space-between;
 	flex-direction: row;
 	gap: 20px;
 	width: 1032px;
-`;e(i.TitleMedium)`
+`;t.default(d.TitleMedium)`
 	padding: 6px 6px 20px 6px;
-`;e.div`
+`;t.default.div`
 	padding: 6px 6px 20px 6px;
-`;const o=e.div`
+`;const p=t.default.div`
 	display: grid;
 	grid-template-columns: repeat(
-		${t=>t.mediaType=="post"?6:8},
-		${t=>t.mediaType=="post"?156:113}px
+		${e=>e.mediaType=="post"?6:8},
+		${e=>e.mediaType=="post"?156:113}px
 	);
 	grid-gap: 16px;
 	overflow-y: scroll;
@@ -50,10 +50,10 @@
 	&:hover::-webkit-scrollbar {
 		width: 0.5em;
 	}
-`,d=e.div`
+`,a=t.default.div`
 	position: relative;
 	cursor: pointer;
-	height: ${t=>t.mediaType=="post"?155:180}px;
+	height: ${e=>e.mediaType=="post"?155:180}px;
 	padding: 2px;
 	border-radius: 4px;
 	border: 2px solid transparent;
@@ -67,8 +67,8 @@
 		position: absolute;
 		top: 2px;
 		left: 2px;
-		width: ${t=>t.mediaType=="post"?148:104}px;
-		height: ${t=>t.mediaType=="post"?148:172}px;
+		width: ${e=>e.mediaType=="post"?148:104}px;
+		height: ${e=>e.mediaType=="post"?148:172}px;
 		background-color: rgba(255, 255, 255, 0.9);
 		display: flex;
 		flex-direction: column;
@@ -107,23 +107,23 @@
 	&.selected {
 		border: 2px solid #731dcf;
 	}
-`;e.div`
+`;t.default.div`
 	width: 100%;
 	display: flex;
 	flex-direction: row;
 	padding-top: 12px;
 	justify-content: space-between;
 	border-top: 1px solid #e0e0e0;
-`;e.div`
+`;t.default.div`
 	flex: 1;
 	padding-top: 10px;
 	display: flex;
 	justify-content: flex-start;
-`;e.div`
+`;t.default.div`
 	flex: 1;
 	display: flex;
 	flex-direction: row;
 	justify-content: flex-end;
 	gap: 10px;
-`;exports.StyledProduct=d;exports.StyledProductGrid=o;
+`;exports.StyledProduct=a;exports.StyledProductGrid=p;
 //# sourceMappingURL=PostPicker.styled.js.map

package/dist/cjs/components/postPicker/PostPicker.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PostPicker.styled.js","sources":["../../../../src/components/postPicker/PostPicker.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TitleMedium } from '@src/components/TypographyStyle';\n\nenum MEDIA_TYPES {\n\tSTORY = 'story',\n\tPOST = 'post',\n\tREEL = 'reel',\n}\n\nexport const StyledModal = styled.div`\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tcursor: default;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const StyledModalContent = styled.div`\n\tbackground-color: #fff;\n\twidth: 1032px;\n\theight: auto;\n\tmax-height: 600px;\n\tborder-radius: 4px;\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tposition: relative;\n`;\n\nexport const StyledModalHeader = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tflex-direction: row;\n\tgap: 20px;\n\twidth: 1032px;\n`;\n\nexport const StyledTitleMedium = styled(TitleMedium)`\n\tpadding: 6px 6px 20px 6px;\n`;\n\nexport const StyledCloseButton = styled.div`\n\tpadding: 6px 6px 20px 6px;\n`;\n\nexport const StyledProductGrid = styled.div<{ mediaType: string }>`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(\n\t\t${(props) => (props.mediaType == MEDIA_TYPES.POST ? 6 : 8)},\n\t\t${(props) => (props.mediaType == MEDIA_TYPES.POST ? 156 : 113)}px\n\t);\n\tgrid-gap: 16px;\n\toverflow-y: scroll;\n\theight: calc(564px - 140px);\n\toverflow-y: auto;\n\tpadding: 0 24px;\n\n\t/* Hide scrollbar by default /\n\t&::-webkit-scrollbar {\n\t\twidth: 0.5em;\n\t}\n\t/ Show scrollbar on hover */\n\t&:hover::-webkit-scrollbar {\n\t\twidth: 0.5em;\n\t}\n`;\n\nexport const StyledProduct = styled.div<{ mediaType: string }>`\n\tposition: relative;\n\tcursor: pointer;\n\theight: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 155 : 180)}px;\n\tpadding: 2px;\n\tborder-radius: 4px;\n\tborder: 2px solid transparent;\n\n\timg {\n\t\tobject-fit: cover;\n\t\tborder-radius: 4px;\n\t}\n\n\t.overlay {\n\t\tposition: absolute;\n\t\ttop: 2px;\n\t\tleft: 2px;\n\t\twidth: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 148 : 104)}px;\n\t\theight: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 148 : 172)}px;\n\t\tbackground-color: rgba(255, 255, 255, 0.9);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease-in-out;\n\t\tborder-radius: 4px;\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\t.overlay__caption {\n\t\ttext-align: center;\n\t\tbackground: #fafafa;\n\t\tpadding: 10px 20px;\n\t\theight: 40px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.overlay__redirection {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 5px;\n\t\tpadding: 10px;\n\t}\n\n\t&:hover .overlay {\n\t\topacity: 1;\n\t}\n\n\t&.selected {\n\t\tborder: 2px solid #731dcf;\n\t}\n`;\n\nexport const FooterContainer = styled.div`\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding-top: 12px;\n\tjustify-content: space-between;\n\tborder-top: 1px solid #e0e0e0;\n`;\n\nexport const InfoSection = styled.div`\n\tflex: 1;\n\tpadding-top: 10px;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n`;\n\nexport const ButtonViewContainer = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-end;\n\tgap: 10px;\n`;\n"],"names":["styled","TitleMedium","StyledProductGrid","props","StyledProduct"],"mappings":"~~wJAS2BA~~,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaAA,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaRA,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQPA,~~EAAOC~~,aAAW;AAAA;AAAA,EAIlBD,~~EAAO~~;AAAA;AAAA,EAIjC,MAAME,EAAoBF,~~EAAO~~;AAAA;AAAA;AAAA,IAGnCG,GAAWA,EAAM,WAAa,OAAmB,EAAI,CAAE;AAAA,IACvDA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBnDC,EAAgBJ,~~EAAO~~;AAAA;AAAA;AAAA,WAGxBG,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAc3DA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA,YAC1DA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyCzCH,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASXA,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA,EAOCA,~~EAAO~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"PostPicker.styled.js","sources":["../../../../src/components/postPicker/PostPicker.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { TitleMedium } from '@src/components/TypographyStyle';\n\nenum MEDIA_TYPES {\n\tSTORY = 'story',\n\tPOST = 'post',\n\tREEL = 'reel',\n}\n\nexport const StyledModal = styled.div`\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tcursor: default;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tbackground-color: rgba(0, 0, 0, 0.5);\n\talign-items: center;\n\tjustify-content: center;\n`;\n\nexport const StyledModalContent = styled.div`\n\tbackground-color: #fff;\n\twidth: 1032px;\n\theight: auto;\n\tmax-height: 600px;\n\tborder-radius: 4px;\n\tpadding: 24px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tposition: relative;\n`;\n\nexport const StyledModalHeader = styled.div`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tflex-direction: row;\n\tgap: 20px;\n\twidth: 1032px;\n`;\n\nexport const StyledTitleMedium = styled(TitleMedium)`\n\tpadding: 6px 6px 20px 6px;\n`;\n\nexport const StyledCloseButton = styled.div`\n\tpadding: 6px 6px 20px 6px;\n`;\n\nexport const StyledProductGrid = styled.div<{ mediaType: string }>`\n\tdisplay: grid;\n\tgrid-template-columns: repeat(\n\t\t${(props) => (props.mediaType == MEDIA_TYPES.POST ? 6 : 8)},\n\t\t${(props) => (props.mediaType == MEDIA_TYPES.POST ? 156 : 113)}px\n\t);\n\tgrid-gap: 16px;\n\toverflow-y: scroll;\n\theight: calc(564px - 140px);\n\toverflow-y: auto;\n\tpadding: 0 24px;\n\n\t/* Hide scrollbar by default /\n\t&::-webkit-scrollbar {\n\t\twidth: 0.5em;\n\t}\n\t/ Show scrollbar on hover */\n\t&:hover::-webkit-scrollbar {\n\t\twidth: 0.5em;\n\t}\n`;\n\nexport const StyledProduct = styled.div<{ mediaType: string }>`\n\tposition: relative;\n\tcursor: pointer;\n\theight: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 155 : 180)}px;\n\tpadding: 2px;\n\tborder-radius: 4px;\n\tborder: 2px solid transparent;\n\n\timg {\n\t\tobject-fit: cover;\n\t\tborder-radius: 4px;\n\t}\n\n\t.overlay {\n\t\tposition: absolute;\n\t\ttop: 2px;\n\t\tleft: 2px;\n\t\twidth: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 148 : 104)}px;\n\t\theight: ${(props) => (props.mediaType == MEDIA_TYPES.POST ? 148 : 172)}px;\n\t\tbackground-color: rgba(255, 255, 255, 0.9);\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\topacity: 0;\n\t\ttransition: opacity 0.2s ease-in-out;\n\t\tborder-radius: 4px;\n\n\t\ta {\n\t\t\ttext-decoration: none;\n\t\t}\n\t}\n\n\t.overlay__caption {\n\t\ttext-align: center;\n\t\tbackground: #fafafa;\n\t\tpadding: 10px 20px;\n\t\theight: 40px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.overlay__redirection {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tgap: 5px;\n\t\tpadding: 10px;\n\t}\n\n\t&:hover .overlay {\n\t\topacity: 1;\n\t}\n\n\t&.selected {\n\t\tborder: 2px solid #731dcf;\n\t}\n`;\n\nexport const FooterContainer = styled.div`\n\twidth: 100%;\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding-top: 12px;\n\tjustify-content: space-between;\n\tborder-top: 1px solid #e0e0e0;\n`;\n\nexport const InfoSection = styled.div`\n\tflex: 1;\n\tpadding-top: 10px;\n\tdisplay: flex;\n\tjustify-content: flex-start;\n`;\n\nexport const ButtonViewContainer = styled.div`\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-end;\n\tgap: 10px;\n`;\n"],"names":["styled","TitleMedium","StyledProductGrid","props","StyledProduct"],"mappings":"uNAS2BA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaAA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaRA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQPA,EAAAA,QAAOC,aAAW;AAAA;AAAA,EAIlBD,EAAAA,QAAO;AAAA;AAAA,EAIjC,MAAME,EAAoBF,EAAAA,QAAO;AAAA;AAAA;AAAA,IAGnCG,GAAWA,EAAM,WAAa,OAAmB,EAAI,CAAE;AAAA,IACvDA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAkBnDC,EAAgBJ,EAAAA,QAAO;AAAA;AAAA;AAAA,WAGxBG,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAc3DA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA,YAC1DA,GAAWA,EAAM,WAAa,OAAmB,IAAM,GAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyCzCH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASXA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOCA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}