@bikdotai/bik-component-library 0.0.687-beta.8 → 0.0.687

package/dist/esm/components/multi-level-dropdown/MenuItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MultiLevelDropdownOption, SingleOption } from './type';
+export declare const MenuItem: React.FC<{
+    width: string;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+    option: SingleOption;
+    parents: MultiLevelDropdownOption[];
+}>;

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import o from"../../assets/icons/chevronRight2.svg.js";import i,{useRef as r,Suspense as l}from"react";import{COLORS as c}from"../../constants/Theme.js";import{BodyCaption as d,BodyTiny as s}from"../TypographyStyle.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as h,LeadingIconContainer as m,TrailingIconContainer as u,SubMenuContainer as g,StyledSubMenuWrapper as b,SubMenuListContainer as f}from"./MultiLevelDropdown.styled.js";const v=i.lazy((()=>import("./MenuList.js").then((e=>({default:e.MenuList}))))),y=({width:y,onDropdownItemClick:w,option:M,parents:C})=>{const[I,j]=i.useState(!1),[L,S]=i.useState(!1),[T,k]=i.useState({top:0,left:0}),x=r({top:0,left:0});return e(a,{onMouseEnter:e=>{j(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();k({top:t.top,left:t.right}),x.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{j(!1)},onClick:()=>{!w||M.disabled||M.children?.length||w(M,C)},id:"menuItemWrapper",style:{cursor:M.disabled?"not-allowed":"pointer",backgroundColor:M.disabled?c.surface.standard:"transparent"},children:[M.customComponent?M.customComponent:e(p,{isSelected:M.selected,isSubMenuOpen:I,isHovered:L,isDisabled:M.disabled??!1,children:[e(h,{children:[M.leadingIcon&&t(m,{children:M.leadingIcon}),e("div",{children:[t(d,{style:{color:M.disabled?c.content.inactive:M.selected||L?c.content.positive:c.content.primary},children:M.label}),M.subText&&t(s,{style:{color:M.disabled?c.content.inactive:M.selected||L?c.content.positive:c.content.secondary,marginTop:"2px"},children:M.subText})]})]}),M.children&&M.children.length>0?t(u,{children:t(o,{width:16,height:16,color:M.disabled?c.content.inactive:M.selected||L?c.content.positive:c.content.primary})}):M.trailingIcon?t(u,{children:M.trailingIcon}):t(n,{})]}),!M.disabled&&M.children&&M.children.length>0&&I&&t(g,{width:y,className:"submenu",onMouseEnter:()=>S(!0),onMouseLeave:()=>S(!1),children:t(b,{width:y,top:T.top,left:T.left,children:t(f,{children:t(l,{fallback:t("div",{children:"Loading..."}),children:t(v,{width:y,onDropdownItemClick:w,options:M.children,parents:[...C,M]})})})})})]})};export{y as MenuItem};
+import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as l,Suspense as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import{BodyCaption as d,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as a,MenuItemContainer as p,ContentContainer as h,LeadingIconContainer as u,TrailingIconContainer as m,SubMenuContainer as g,StyledSubMenuWrapper as v,SubMenuListContainer as b}from"./MultiLevelDropdown.styled.js";const f=o.lazy((()=>import("./MenuList.js").then((e=>({default:e.MenuList}))))),j=j=>{let{width:y,onDropdownItemClick:w,option:M,parents:O}=j;var C,I,L,S,T,k,x;const[D,E]=o.useState(!1),[R,z]=o.useState(!1),[B,H]=o.useState({top:0,left:0}),N=l({top:0,left:0});return e(a,Object.assign({onMouseEnter:e=>{E(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();H({top:t.top,left:t.right}),N.current={top:t.top,left:t.right}})(e)},onMouseLeave:()=>{E(!1)},onClick:()=>{var e,t;!w||null!==(e=M.disabled)&&void 0!==e&&e||(null===(t=M.children)||void 0===t?void 0:t.length)||w(M,O)},id:"menuItemWrapper",style:{cursor:null!==(C=M.disabled)&&void 0!==C&&C?"not-allowed":"pointer",backgroundColor:null!==(I=M.disabled)&&void 0!==I&&I?s.surface.standard:"transparent"}},{children:[M.customComponent?M.customComponent:e(p,Object.assign({isSelected:M.selected,isSubMenuOpen:D,isHovered:R,isDisabled:null!==(L=M.disabled)&&void 0!==L&&L},{children:[e(h,{children:[M.leadingIcon&&t(u,{children:M.leadingIcon}),e("div",{children:[t(d,Object.assign({style:{color:null!==(S=M.disabled)&&void 0!==S&&S?s.content.inactive:M.selected||R?s.content.positive:s.content.primary}},{children:M.label})),M.subText&&t(c,Object.assign({style:{color:null!==(T=M.disabled)&&void 0!==T&&T?s.content.inactive:M.selected||R?s.content.positive:s.content.secondary,marginTop:"2px"}},{children:M.subText}))]})]}),M.children&&M.children.length>0?t(m,{children:t(i,{width:16,height:16,color:null!==(k=M.disabled)&&void 0!==k&&k?s.content.inactive:M.selected||R?s.content.positive:s.content.primary})}):M.trailingIcon?t(m,{children:M.trailingIcon}):t(n,{})]})),!(null!==(x=M.disabled)&&void 0!==x&&x)&&M.children&&M.children.length>0&&D&&t(g,Object.assign({width:y,className:"submenu",onMouseEnter:()=>z(!0),onMouseLeave:()=>z(!1)},{children:t(v,Object.assign({width:y,top:B.top,left:B.left},{children:t(b,{children:t(r,Object.assign({fallback:t("div",{children:"Loading..."})},{children:t(f,{width:y,onDropdownItemClick:w,options:M.children,parents:[...O,M]})}))})}))}))]}))};export{j as MenuItem};

package/dist/esm/components/multi-level-dropdown/MenuList.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MultiLevelDropdownOption } from './type';
+export declare const MenuList: React.FC<{
+    width: string;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+    options: MultiLevelDropdownOption[];
+    parents: MultiLevelDropdownOption[];
+}>;

package/dist/esm/components/multi-level-dropdown/MenuList.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{GroupedMenuList as t}from"./GroupedMenuList.js";import{MenuItem as n}from"./MenuItem.js";import{StyledMenuList as i}from"./MultiLevelDropdown.styled.js";const r=({width:r,onDropdownItemClick:e,options:p,parents:m})=>o(i,{children:p.map(((i,p)=>"value"in i?o(n,{width:r,onDropdownItemClick:e,option:i,parents:m},p):"options"in i&&i.options.length>0?o(t,{width:r,onDropdownItemClick:e,option:i,parents:m},p):void 0))});export{r as MenuList};
+import{jsx as o}from"react/jsx-runtime";import{GroupedMenuList as t}from"./GroupedMenuList.js";import{MenuItem as n}from"./MenuItem.js";import{StyledMenuList as i}from"./MultiLevelDropdown.styled.js";const r=r=>{let{width:e,onDropdownItemClick:p,options:m,parents:s}=r;return o(i,{children:m.map(((i,r)=>"value"in i?o(n,{width:e,onDropdownItemClick:p,option:i,parents:s},r):"options"in i&&i.options.length>0?o(t,{width:e,onDropdownItemClick:p,option:i,parents:s},r):void 0))})};export{r as MenuList};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.d.ts

@@ -1,6 +1,3 @@
-import React__default from 'react';
-import { MultiLevelDropdownProps } from './type.js';
-
-declare const MultiLevelDropdown: React__default.FC<MultiLevelDropdownProps>;
-
-export { MultiLevelDropdown };
+import React from 'react';
+import { MultiLevelDropdownProps } from './type';
+export declare const MultiLevelDropdown: React.FC<MultiLevelDropdownProps>;

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1 +1 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import t,{useState as r,useEffect as n}from"react";import{ZeroState as i}from"../zeroState/ZeroState.js";import{COLORS as s}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as d}from"../floater/floater.js";import{MenuList as c}from"./MenuList.js";import{DropdownContainer as p,OptionsContainer as f,NoResultsContainer as h}from"./MultiLevelDropdown.styled.js";const a=({options:a,width:u,isSearchable:m,onDropdownItemClick:w,refElement:x,topOffset:y,leftOffset:g,isDropdownOpen:b,onDropdownOutsideClick:j})=>{const v=t.useRef(null),[O,S]=r(a),C=e=>{const o=Array.isArray(a)?[...a]:[],t=[];for(;o.length>0;){const r=o.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&t.push(r),r&&"children"in r&&r.children?o.push(...r.children):r&&"options"in r&&r.options&&o.push(...r.options)}const r=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const o=r(e.children);if(o.length>0)return{...e,children:o}}if("options"in e&&e.options){const o=r(e.options);if(o.length>0)return{...e,options:o}}return null})).filter((e=>null!==e));S(r(a))},D=e=>{v.current&&!v.current.contains(e.target)?j&&j(!0):j&&j(!1)};return n((()=>{b&&C("")}),[b]),n((()=>(document.addEventListener("mousedown",D),()=>{document.removeEventListener("mousedown",D)})),[]),n((()=>{S(a)}),[a]),e(d,{refElement:x,topOffset:y,leftOffset:g,children:b&&e("div",{ref:v,style:{backgroundColor:s.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"},children:o(p,{width:u,children:[m&&e("div",{style:{padding:"4px",width:u??"200px"},children:e(l,{onSearch:C,version:"2.0"})}),e(f,{width:u,children:(O??[]).length>0&&e(c,{width:u??"200px",onDropdownItemClick:w,options:O,parents:[]})}),0===(O??[]).length&&e(h,{style:{width:u??"200px"},children:e(i,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})})]})})})};export{a as MultiLevelDropdown};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as d}from"./MenuList.js";import{DropdownContainer as a,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const f=f=>{let{options:h,width:m,isSearchable:w,onDropdownItemClick:g,refElement:b,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:y}=f;const v=t.useRef(null),[S,C]=o(h),D=e=>{const n=Array.isArray(h)?[...h]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));C(o(h))},L=e=>{v.current&&!v.current.contains(e.target)?y&&y(!0):y&&y(!1)};return r((()=>{x&&D("")}),[x]),r((()=>(document.addEventListener("mousedown",L),()=>{document.removeEventListener("mousedown",L)})),[]),r((()=>{C(h)}),[h]),e(c,Object.assign({refElement:b,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:v,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"8px",whiteSpace:"normal"}},{children:n(a,Object.assign({width:m},{children:[w&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:D,version:"2.0"})})),e(p,Object.assign({width:m},{children:(null!=S?S:[]).length>0&&e(d,{width:null!=m?m:"200px",onDropdownItemClick:g,options:S,parents:[]})})),0===(null!=S?S:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{f as MultiLevelDropdown};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -0,0 +1,32 @@
+export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface MenuItemContainerProps {
+    isSelected?: boolean;
+    isHovered?: boolean;
+    isSubMenuOpen?: boolean;
+    isDisabled?: boolean;
+}
+export declare const MenuItemContainer: import("styled-components").StyledComponent<"div", any, MenuItemContainerProps, never>;
+export declare const ContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TrailingIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SubMenuContainer: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+}, never>;
+export declare const StyledSubMenuWrapper: import("styled-components").StyledComponent<"div", any, {
+    width: string;
+    top: number;
+    left: number;
+}, never>;

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,10 +1,10 @@
-import i from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const t=i.div`
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
 	position: relative;
 	border-radius: 8px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	padding-bottom: 4px;
-`,d=i.div`
-	width: ${({width:i})=>i||"200px"};
+`,r=e.div`
+	width: ${e=>{let{width:i}=e;return i||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
@@ -12,24 +12,24 @@ import i from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,o=i.div`
+`,n=e.div`
 	margin-top: 64px;
 	height: 200px;
-	width: ${({width:i})=>i||"200px"};
-`,r=i.div`
+	width: ${e=>{let{width:i}=e;return i||"200px"}};
+`,d=e.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
 	margin: 4px 0;
-`,n=i.div`
+`,o=e.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`,p=i.div`
+`,p=e.div`
 	position: relative;
 	padding: 1px 4px;
 	cursor: pointer;
@@ -38,33 +38,33 @@ import i from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,s=i.div`
+`,s=e.div`
 	position: relative;
 	padding: 4px 8px 4px 8px;
 	transition: background-color 0.2s;
 	width: 100%;
 	border-radius: 8px;
 	justify-content: center;
-	background-color: ${({isSelected:i,isHovered:t,isSubMenuOpen:d,isDisabled:o})=>o?e.surface.standard:i||d?e.background.positive.light:t?e.surface.hovered:e.surface.standard};
-	color: ${({isSelected:i,isSubMenuOpen:t})=>i||t?e.content.positive:e.content.primary};
+	background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:n,isDisabled:d}=e;return d?i.surface.standard:t||n?i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
+	color: ${e=>{let{isSelected:t,isSubMenuOpen:r}=e;return t||r?i.content.positive:i.content.primary}};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		background-color: ${({isSelected:i,isDisabled:t})=>t?e.surface.standard:i?e.background.positive.light:e.surface.hovered};
+		background-color: ${e=>{let{isSelected:t,isDisabled:r}=e;return r?i.surface.standard:t?i.background.positive.light:i.surface.hovered}};
 	}
-`,a=i.div`
+`,a=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,x=i.div`
+`,x=e.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,c=i.div`
+`,l=e.div`
 	margin: 4px;
-	background-color: ${e.surface.standard};
+	background-color: ${i.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: 8px;
 	padding-top: 4px;
@@ -75,24 +75,24 @@ import i from"styled-components";import{COLORS as e}from"../../constants/Theme.j
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`,l=i.div`
+`,c=e.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 4px;
-`,h=i.div`
+`,h=e.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`,g=i.div`
-	width: ${i=>i.width};
-`,u=i(x)`
-	width: ${i=>i.width};
-	top: ${i=>i.top}px;
-	left: ${i=>i.left}px;
-`;export{a as ContentContainer,t as DropdownContainer,r as GroupedMenuListContainer,l as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,o as NoResultsContainer,d as OptionsContainer,n as StyledMenuList,u as StyledSubMenuWrapper,g as SubMenuContainer,c as SubMenuListContainer,x as SubMenuWrapper,h as TrailingIconContainer};
+`,u=e.div`
+	width: ${e=>e.width};
+`,g=e(x)`
+	width: ${e=>e.width};
+	top: ${e=>e.top}px;
+	left: ${e=>e.left}px;
+`;export{a as ContentContainer,t as DropdownContainer,d as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,o as StyledMenuList,g as StyledSubMenuWrapper,u as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,h as TrailingIconContainer};

package/dist/esm/components/multi-level-dropdown/index.d.ts

@@ -0,0 +1 @@
+export * from './MultiLevelDropdown';

package/dist/esm/components/multi-level-dropdown/type.d.ts

@@ -1,30 +1,28 @@
-import { FloaterProps } from '../floater/floater.js';
-
-interface MultiLevelDropdownProps extends FloaterProps {
-    options: MultiLevelDropdownOption[];
-    width?: string;
-    isSearchable?: boolean;
-    isDropdownOpen?: boolean;
-    onDropdownOutsideClick?: (isOutsideClick: any) => void;
-    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
-}
-type GroupedOption = {
-    label: string;
-    options: SingleOption[];
-    trailingIcon?: JSX.Element;
-    leadingIcon?: JSX.Element;
-};
-type SingleOption = {
-    label: string;
-    value: string;
-    subText?: string;
-    trailingIcon?: JSX.Element;
-    leadingIcon?: JSX.Element;
-    customComponent?: JSX.Element;
-    disabled?: boolean;
-    selected?: boolean;
-    children?: SingleOption[];
-};
-type MultiLevelDropdownOption = SingleOption | GroupedOption;
-
-export type { GroupedOption, MultiLevelDropdownOption, MultiLevelDropdownProps, SingleOption };
+/// <reference types="react" />
+import { FloaterProps } from '../floater/floater';
+export interface MultiLevelDropdownProps extends FloaterProps {
+    options: MultiLevelDropdownOption[];
+    width?: string;
+    isSearchable?: boolean;
+    isDropdownOpen?: boolean;
+    onDropdownOutsideClick?: (isOutsideClick: any) => void;
+    onDropdownItemClick?: (option: MultiLevelDropdownOption, parents: MultiLevelDropdownOption[]) => void;
+}
+export type GroupedOption = {
+    label: string;
+    options: SingleOption[];
+    trailingIcon?: JSX.Element;
+    leadingIcon?: JSX.Element;
+};
+export type SingleOption = {
+    label: string;
+    value: string;
+    subText?: string;
+    trailingIcon?: JSX.Element;
+    leadingIcon?: JSX.Element;
+    customComponent?: JSX.Element;
+    disabled?: boolean;
+    selected?: boolean;
+    children?: SingleOption[];
+};
+export type MultiLevelDropdownOption = SingleOption | GroupedOption;

package/dist/esm/components/navigation-hyperlink/NavigationHyperlink.d.ts

@@ -1,14 +1,9 @@
-import * as styled_components from 'styled-components';
-import { ReactNode } from 'react';
-
-interface NavigationHyperlinkProps {
-    router: any;
-    href: string;
-    children?: ReactNode;
-    newTab?: boolean;
-}
-declare const NavigationHyperlink: React.FC<NavigationHyperlinkProps>;
-declare const NaLinkWrapper: styled_components.StyledComponent<"div", any, {}, never>;
-
-export { NaLinkWrapper, NavigationHyperlink };
-export type { NavigationHyperlinkProps };
+import { ReactNode } from 'react';
+export interface NavigationHyperlinkProps {
+    router: any;
+    href: string;
+    children?: ReactNode;
+    newTab?: boolean;
+}
+export declare const NavigationHyperlink: React.FC<NavigationHyperlinkProps>;
+export declare const NaLinkWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/navigation-hyperlink/NavigationHyperlink.js

@@ -1,3 +1,3 @@
-import{jsx as n}from"react/jsx-runtime";import o from"styled-components";const i=o=>{const{router:i,href:t,newTab:r}=o;return n(e,{onClick:n=>{if(t.includes("http")){const o=r||n.metaKey?"_blank":"_self";window.open(t,o)}else{const o=`${t.startsWith("/")?"":"/"}${t}`;n.metaKey?window.open(window.location.origin+o,"_blank"):i?i.push(window.location.origin+o):window.open(window.location.origin+o,"_self")}},children:o.children})},e=o.div`
+import{jsx as n}from"react/jsx-runtime";import o from"styled-components";const i=o=>{const{router:i,href:t,newTab:r}=o;return n(e,Object.assign({onClick:n=>{if(t.includes("http")){const o=r||n.metaKey?"_blank":"_self";window.open(t,o)}else{const o=`${t.startsWith("/")?"":"/"}${t}`;n.metaKey?window.open(window.location.origin+o,"_blank"):i?i.push(window.location.origin+o):window.open(window.location.origin+o,"_self")}}},{children:o.children}))},e=o.div`
 	//	display: inline-block;
 `;export{e as NaLinkWrapper,i as NavigationHyperlink};

package/dist/esm/components/navigation-hyperlink/index.d.ts

@@ -0,0 +1 @@
+export * from './NavigationHyperlink';

package/dist/esm/components/pagination/Pagination.d.ts

@@ -1,13 +1,9 @@
-import * as React$1 from 'react';
-
-interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
-    numberOfItemsLoaded: number;
-    totalNumberOfItems: number;
-    isLoading?: boolean;
-    onShowMore?: () => void;
-    width?: string;
-}
-declare const Pagination: React$1.ForwardRefExoticComponent<PaginationProps & React$1.RefAttributes<HTMLButtonElement>>;
-
-export { Pagination };
-export type { PaginationProps };
+/// <reference types="react" />
+export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
+    numberOfItemsLoaded: number;
+    totalNumberOfItems: number;
+    isLoading?: boolean;
+    onShowMore?: () => void;
+    width?: string;
+}
+export declare const Pagination: import("react").ForwardRefExoticComponent<PaginationProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/pagination/Pagination.js

@@ -1 +1 @@
-import{jsx as o,Fragment as r,jsxs as e}from"react/jsx-runtime";import{forwardRef as n}from"react";import{BodySecondary as t,ButtonRegular as i}from"../TypographyStyle.js";import{COLORS as l}from"../../constants/Theme.js";import{Pagination as s}from"./Pagination.styled.js";const c=n((({id:n,onShowMore:c,isLoading:a,numberOfItemsLoaded:d,totalNumberOfItems:m,...h})=>o(s,{id:n,...h,children:a?o(r,{children:"loading..."}):o("div",{children:d<m?e(s,{children:[e(t,{style:{color:l.content.secondary},children:["Showing ",d," out of ",m," ","results"]}),o(i,{style:{color:l.content.brand,cursor:"pointer"},onClick:()=>c&&c(),children:"Show more"})]}):o(s,{children:e(t,{style:{color:l.content.secondary},children:["Showing all ",m," results"]})})})})));c.displayName="Pagination";export{c as Pagination};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as r,Fragment as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as n}from"react";import{BodySecondary as i,ButtonRegular as s}from"../TypographyStyle.js";import{COLORS as a}from"../../constants/Theme.js";import{Pagination as l}from"./Pagination.styled.js";const c=n((n=>{var{id:c,onShowMore:d,isLoading:m,numberOfItemsLoaded:h,totalNumberOfItems:g}=n,f=o(n,["id","onShowMore","isLoading","numberOfItemsLoaded","totalNumberOfItems"]);return r(l,Object.assign({id:c},f,{children:m?r(e,{children:"loading..."}):r("div",{children:h<g?t(l,{children:[t(i,Object.assign({style:{color:a.content.secondary}},{children:["Showing ",h," out of ",g," ","results"]})),r(s,Object.assign({style:{color:a.content.brand,cursor:"pointer"},onClick:()=>d&&d()},{children:"Show more"}))]}):r(l,{children:t(i,Object.assign({style:{color:a.content.secondary}},{children:["Showing all ",g," results"]}))})})}))}));c.displayName="Pagination";export{c as Pagination};

package/dist/esm/components/pagination/Pagination.styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const Pagination: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/pagination/Pagination.styled.js

@@ -1,7 +1 @@
-import t from"@emotion/styled";const e=t.div`
-	display: flex;
-	align-items: center;
-	justify-content: start;
-	column-gap: 16px;
-	width: 100%;
-`;export{e as Pagination};
+import t from"@emotion/styled/base";const e=t("div","production"===process.env.NODE_ENV?{target:"e14rxdu80"}:{target:"e14rxdu80",label:"Pagination"})("production"===process.env.NODE_ENV?{name:"ifuiz5",styles:"display:flex;align-items:center;justify-content:start;column-gap:16px;width:100%"}:{name:"ifuiz5",styles:"display:flex;align-items:center;justify-content:start;column-gap:16px;width:100%",map:"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIlBhZ2luYXRpb24uc3R5bGVkLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDcUMiLCJmaWxlIjoiUGFnaW5hdGlvbi5zdHlsZWQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xyXG5leHBvcnQgY29uc3QgUGFnaW5hdGlvbiA9IHN0eWxlZC5kaXYgYFxuXHRkaXNwbGF5OiBmbGV4O1xuXHRhbGlnbi1pdGVtczogY2VudGVyO1xuXHRqdXN0aWZ5LWNvbnRlbnQ6IHN0YXJ0O1xuXHRjb2x1bW4tZ2FwOiAxNnB4O1xuXHR3aWR0aDogMTAwJTtcbmA7XHJcbi8vIyBzb3VyY2VNYXBwaW5nVVJMPVBhZ2luYXRpb24uc3R5bGVkLmpzLm1hcCJdfQ== */",toString:function(){return"You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."}});export{e as Pagination};

package/dist/esm/components/pagination/index.d.ts

@@ -0,0 +1 @@
+export * from './Pagination';

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

@@ -0,0 +1,9 @@
+import { FunctionComponent } from 'react';
+interface OwnProps {
+    isMonthlySelected: boolean;
+    yearlyDiscount: string;
+    onToggle: (isMonthlySelected: boolean) => void;
+}
+type Props = OwnProps;
+declare const DurationSelector: FunctionComponent<Props>;
+export default DurationSelector;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const DurationSelectorStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -1,22 +1,19 @@
-import { FunctionComponent } from 'react';
-import { SubscriptionPlanProps } from './SubscriptionPlan.js';
-
-interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
-    popularTestimony?: string;
-    skipRadioSelection?: boolean;
-    includeText?: string;
-    height?: string;
-    showFeaturesButton?: boolean;
-    businessDescription?: string[];
-    yearlyCode?: string;
-    isPlanSelected?: boolean;
-    onClickShowAllFeatures?: () => void;
-    showSelectedPlanChip?: boolean;
-    perMonthForYearly?: boolean;
-    minHeightOfFeatures?: number;
-}
-type Props = NewSubscriptionPlanProps;
-declare const NewSubscriptionPlan: FunctionComponent<Props>;
-
-export { NewSubscriptionPlan };
-export type { NewSubscriptionPlanProps };
+import { FunctionComponent } from 'react';
+import { SubscriptionPlanProps } from './SubscriptionPlan';
+export interface NewSubscriptionPlanProps extends SubscriptionPlanProps {
+    popularTestimony?: string;
+    skipRadioSelection?: boolean;
+    includeText?: string;
+    height?: string;
+    showFeaturesButton?: boolean;
+    businessDescription?: string[];
+    yearlyCode?: string;
+    isPlanSelected?: boolean;
+    onClickShowAllFeatures?: () => void;
+    showSelectedPlanChip?: boolean;
+    perMonthForYearly?: boolean;
+    minHeightOfFeatures?: number;
+}
+type Props = NewSubscriptionPlanProps;
+export declare const NewSubscriptionPlan: FunctionComponent<Props>;
+export {};

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

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

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

@@ -1,41 +1,38 @@
-import { FunctionComponent } from 'react';
-
-interface PlanPrice {
-    price: number;
-    discount: number;
-}
-interface PlanFeature {
-    detail: string;
-}
-interface SubscriptionPlanProps {
-    code: string;
-    isMostPopular?: boolean;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    planName: string;
-    monthlyPlan: PlanPrice;
-    showTrialOptions: boolean;
-    yearlyPlan: PlanPrice;
-    features: PlanFeature[];
-    showMonthly: boolean;
-    planDescription?: string;
-    planDescriptionDiscount?: string;
-    onPlanSelect: (code: string) => void;
-    bottomDescription?: string;
-    freeTrialMessages?: string;
-    extraBlockMessage?: string;
-    isLoading?: boolean;
-    showMonthlyOptions?: boolean;
-    oldPrice?: number;
-    currency?: string;
-    annualFeatures?: PlanFeature[];
-    hideMonthYearTag?: boolean;
-    buttonText?: string;
-    hoverTooltip?: string;
-    hidePriceBlock?: boolean;
-}
-type Props = SubscriptionPlanProps;
-declare const SubscriptionPlan: FunctionComponent<Props>;
-
-export { SubscriptionPlan };
-export type { SubscriptionPlanProps };
+import { FunctionComponent } from 'react';
+interface PlanPrice {
+    price: number;
+    discount: number;
+}
+interface PlanFeature {
+    detail: string;
+}
+export interface SubscriptionPlanProps {
+    code: string;
+    isMostPopular?: boolean;
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    planName: string;
+    monthlyPlan: PlanPrice;
+    showTrialOptions: boolean;
+    yearlyPlan: PlanPrice;
+    features: PlanFeature[];
+    showMonthly: boolean;
+    planDescription?: string;
+    planDescriptionDiscount?: string;
+    onPlanSelect: (code: string) => void;
+    bottomDescription?: string;
+    freeTrialMessages?: string;
+    extraBlockMessage?: string;
+    isLoading?: boolean;
+    showMonthlyOptions?: boolean;
+    oldPrice?: number;
+    currency?: string;
+    annualFeatures?: PlanFeature[];
+    hideMonthYearTag?: boolean;
+    buttonText?: string;
+    hoverTooltip?: string;
+    hidePriceBlock?: boolean;
+}
+type Props = SubscriptionPlanProps;
+export declare const SubscriptionPlan: FunctionComponent<Props>;
+export {};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import s from"../../assets/icons/check.svg.js";import{Button as o}from"../button/Button.js";import{SubscriptionPlanStyled as r}from"./SubscriptionPlanStyled.js";import{Caption as n,TitleRegular as l,BodyCaption as a,TitleMedium as c,BodyPrimary as d}from"../TypographyStyle.js";import{useCurrency as m}from"../../hooks/useCurreny.js";import{COLORS as h}from"../../constants/Theme.js";const p=p=>{const{formatCurrency:u}=m(),y=p.showMonthlyOptions?p.features:p.annualFeatures||[],b=p.showMonthlyOptions?p.monthlyPlan:p.yearlyPlan,f=!p.isDisabled&&p.isMostPopular,g=e=>0==e?"$0":u(e,"USD");return e(r,{isManifestPlan:!0,isSelected:p.isSelected||!1,style:{marginTop:f?0:24},children:[f&&t("div",{className:"most-popular",children:t(n,{className:"text",children:"Most popular ⭐️"})}),e("div",{className:`box ${p.isSelected?"selected":""} ${p.isDisabled?"disabled":""} ${f?"":"rounded-corners"}\n\t\t\t\t`,children:[e("div",{children:[t(l,{style:{color:h.content.secondary,marginBottom:4},children:p.planName}),p?.hidePriceBlock?t(i,{}):e("div",{className:"price-block",children:[p.oldPrice?t(a,{className:"old--price",children:g(b.price)}):t(i,{}),t(c,{style:{color:h.content.primary},children:p.oldPrice?g(p.oldPrice):g(b.price)}),t(d,{style:{color:h.content.secondary,marginLeft:4},children:p.hideMonthYearTag?"":"/ "+(p.showMonthlyOptions?"month":"year")})]}),e("div",{className:"per-message-price",children:[p.planDescription&&t(a,{style:{color:h.content.secondary},children:p.planDescription}),p.planDescriptionDiscount&&t(a,{style:{color:h.background.positive.vibrant,marginLeft:4},children:p.planDescriptionDiscount})]}),p.showTrialOptions&&e(n,{className:"trial "+(p.isSelected?"selected":""),children:["7 day free trial with ",p.freeTrialMessages," messages"]}),p.extraBlockMessage&&t(n,{className:"trial "+(p.isSelected?"selected":""),children:p.extraBlockMessage}),t("div",{className:"features",children:y.map(((i,o)=>e("div",{className:"feature",children:[t("div",{children:t(s,{height:12,width:12,color:h.content.primary})}),t(a,{className:"feature-text",children:i.detail},o)]},i.detail)))})]}),t("div",{className:"button-box",children:p.isLoading?t(o,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e(i,{children:[p.isSelected&&t(o,{disabled:p.isDisabled,LeadingIcon:s,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:p.buttonText||"Selected Plan"}),!p.isSelected&&!p.isDisabled&&t(o,{buttonType:"primary",size:"medium",onClick:()=>p.onPlanSelect(p.code),matchParentWidth:!0,buttonText:p.buttonText||"Choose plan"})]})})]}),p.bottomDescription&&t("div",{className:`plan-bottom-information\n\t\t\t\t\t${p.isDisabled?"disabled":""}\n\t\t\t\t\t${p.isSelected?"selected":""}\n\t\t\t\t`,children:t(n,{className:"text",style:{color:h.background.inverse},children:p.bottomDescription})})]})};export{p as SubscriptionPlan};
+import{jsxs as e,jsx as t,Fragment as s}from"react/jsx-runtime";import i from"../../assets/icons/check.svg.js";import{Button as n}from"../button/Button.js";import{SubscriptionPlanStyled as a}from"./SubscriptionPlanStyled.js";import{Caption as c,TitleRegular as o,BodyCaption as r,TitleMedium as l,BodyPrimary as d}from"../TypographyStyle.js";import{useCurrency as m}from"../../hooks/useCurreny.js";import{COLORS as h}from"../../constants/Theme.js";const p=p=>{const{formatCurrency:b}=m(),g=p.showMonthlyOptions?p.features:p.annualFeatures||[],u=p.showMonthlyOptions?p.monthlyPlan:p.yearlyPlan,y=!p.isDisabled&&p.isMostPopular,j=e=>0==e?"$0":b(e,"USD");return e(a,Object.assign({isManifestPlan:!0,isSelected:p.isSelected||!1,style:{marginTop:y?0:24}},{children:[y&&t("div",Object.assign({className:"most-popular"},{children:t(c,Object.assign({className:"text"},{children:"Most popular ⭐️"}))})),e("div",Object.assign({className:`box ${p.isSelected?"selected":""} ${p.isDisabled?"disabled":""} ${y?"":"rounded-corners"}\n\t\t\t\t`},{children:[e("div",{children:[t(o,Object.assign({style:{color:h.content.secondary,marginBottom:4}},{children:p.planName})),(null==p?void 0:p.hidePriceBlock)?t(s,{}):e("div",Object.assign({className:"price-block"},{children:[p.oldPrice?t(r,Object.assign({className:"old--price"},{children:j(u.price)})):t(s,{}),t(l,Object.assign({style:{color:h.content.primary}},{children:p.oldPrice?j(p.oldPrice):j(u.price)})),t(d,Object.assign({style:{color:h.content.secondary,marginLeft:4}},{children:p.hideMonthYearTag?"":"/ "+(p.showMonthlyOptions?"month":"year")}))]})),e("div",Object.assign({className:"per-message-price"},{children:[p.planDescription&&t(r,Object.assign({style:{color:h.content.secondary}},{children:p.planDescription})),p.planDescriptionDiscount&&t(r,Object.assign({style:{color:h.background.positive.vibrant,marginLeft:4}},{children:p.planDescriptionDiscount}))]})),p.showTrialOptions&&e(c,Object.assign({className:"trial "+(p.isSelected?"selected":"")},{children:["7 day free trial with ",p.freeTrialMessages," messages"]})),p.extraBlockMessage&&t(c,Object.assign({className:"trial "+(p.isSelected?"selected":"")},{children:p.extraBlockMessage})),t("div",Object.assign({className:"features"},{children:g.map(((s,n)=>e("div",Object.assign({className:"feature"},{children:[t("div",{children:t(i,{height:12,width:12,color:h.content.primary})}),t(r,Object.assign({className:"feature-text"},{children:s.detail}),n)]}),s.detail)))}))]}),t("div",Object.assign({className:"button-box"},{children:p.isLoading?t(n,{isLoading:!0,buttonType:"primary",buttonText:"Choose plan",size:"medium",matchParentWidth:!0}):e(s,{children:[p.isSelected&&t(n,{disabled:p.isDisabled,LeadingIcon:i,buttonType:"tertiary",size:"medium",matchParentWidth:!0,buttonText:p.buttonText||"Selected Plan"}),!p.isSelected&&!p.isDisabled&&t(n,{buttonType:"primary",size:"medium",onClick:()=>p.onPlanSelect(p.code),matchParentWidth:!0,buttonText:p.buttonText||"Choose plan"})]})}))]})),p.bottomDescription&&t("div",Object.assign({className:`plan-bottom-information\n\t\t\t\t\t${p.isDisabled?"disabled":""}\n\t\t\t\t\t${p.isSelected?"selected":""}\n\t\t\t\t`},{children:t(c,Object.assign({className:"text",style:{color:h.background.inverse}},{children:p.bottomDescription}))}))]}))};export{p as SubscriptionPlan};