@bikdotai/bik-component-library 0.0.839-beta.2 → 0.0.839-beta.4

package/dist/esm/components/plans/SubscriptionPlanSelector.js.map

@@ -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 { stripHtmlTags } from '@src/helpers/sanitize';\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\tconst sanitized = stripHtmlTags(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(sanitized);\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\tsanitized,\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","sanitized","stripHtmlTags","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
+{"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/esm/editor/BikEditor.js

@@ -1,88 +1,84 @@
 import { jsxs as g, jsx as h } from "react/jsx-runtime";
-import { getMarkRange as yt } from "../node_modules/@tiptap/core/dist/index.js";
-import { useEditor as Bt, EditorContent as bt } from "@tiptap/react";
-import { forwardRef as xt, useCallback as vt, useState as K, useRef as a, useEffect as At, useImperativeHandle as Et } from "react";
-import { BodyCaption as X } from "../components/TypographyStyle.js";
-import { sanitizeEmailHtml as Rt, sanitizeBasicHtml as Tt } from "../helpers/sanitize.js";
-import { BikEditorShell as It, BikJsonHeader as Lt, BikJsonError as Mt } from "./BikEditor.styles.js";
-import { DEFAULT_FORMAT_STATE as Y } from "./BikEditor.types.js";
-import { normalizeHtml as Ot, buildJsonCodeBlockHtml as Jt, buildSectionedContent as tt, extractActiveFormats as et, extractContent as nt, parseJson as p, getCodeBlockText as d, extractBodyContent as zt, extractSectionContent as Ft, setCodeBlockText as b, findSectionEndPos as ot, findSectionStartPos as Ht, setSectionContentInEditor as E, insertInlineHtml as Nt } from "./BikEditor.utils.js";
-import { buildExtensions as jt } from "./extensions/buildExtensions.js";
-import { LinkBubbleMenu as Pt } from "./floating/LinkBubbleMenu.js";
-import wt from "../icons/BIK AI specific/WandSparkles.js";
-import Dt from "../icons/Actions/Formatting/Copy.js";
-function qt(B) {
-  return Object.entries(B).map(
+import { getMarkRange as kt } from "../node_modules/@tiptap/core/dist/index.js";
+import { useEditor as yt, EditorContent as Bt } from "@tiptap/react";
+import { forwardRef as bt, useState as G, useRef as a, useEffect as xt, useImperativeHandle as vt } from "react";
+import { BodyCaption as K } from "../components/TypographyStyle.js";
+import { BikEditorShell as At, BikJsonHeader as Tt, BikJsonError as Et } from "./BikEditor.styles.js";
+import { DEFAULT_FORMAT_STATE as X } from "./BikEditor.types.js";
+import { buildJsonCodeBlockHtml as Rt, buildSectionedContent as Y, normalizeHtml as i, extractActiveFormats as tt, extractContent as et, parseJson as p, getCodeBlockText as d, extractBodyContent as It, extractSectionContent as Lt, setCodeBlockText as b, findSectionEndPos as nt, findSectionStartPos as Mt, setSectionContentInEditor as T, insertInlineHtml as Ot } from "./BikEditor.utils.js";
+import { buildExtensions as Jt } from "./extensions/buildExtensions.js";
+import { LinkBubbleMenu as Ft } from "./floating/LinkBubbleMenu.js";
+import Nt from "../icons/BIK AI specific/WandSparkles.js";
+import jt from "../icons/Actions/Formatting/Copy.js";
+function zt(y) {
+  return Object.entries(y).map(
     ([x, S]) => `${x.replace(/([A-Z])/g, (k) => `-${k.toLowerCase()}`)}:${S}`
   ).join(";");
 }
-const Ut = (B, x) => {
+const Ht = (y, x) => {
   const {
     initialContent: S,
     sections: k,
-    features: y,
-    disabled: rt,
-    maxCharacters: R,
-    characterLimit: st,
-    shortcuts: it,
-    sendShortcut: ct,
+    features: B,
+    disabled: ot,
+    maxCharacters: E,
+    characterLimit: rt,
+    shortcuts: st,
+    sendShortcut: it,
     mentions: l,
     slashCommands: C,
-    link: at,
-    onPaste: lt,
-    onReady: T,
+    link: ct,
+    onPaste: at,
+    onReady: R,
     onChange: I,
     onSend: v,
     onFocus: L,
     onBlur: M,
     onSelectionChange: O,
-    minHeight: dt,
-    maxHeight: ut,
-    style: mt,
-    className: ft,
+    minHeight: lt,
+    maxHeight: dt,
+    style: ut,
+    className: mt,
     editorClassName: J,
-    editorStyle: z,
-    renderJsonError: F
-  } = B, m = !!y?.jsonMode, H = !!y?.richPaste ? Rt : Tt, i = vt(
-    (t) => Ot(t, H),
-    [H]
-  ), [u, N] = K(null), [gt, j] = K(!1), ht = m ? Jt(S ?? "") : k?.length ? tt(
+    editorStyle: F,
+    renderJsonError: N
+  } = y, m = !!B?.jsonMode, [u, j] = G(null), [ft, z] = G(!1), gt = m ? Rt(S ?? "") : k?.length ? Y(
     i(S ?? ""),
     k.map((t) => ({ ...t, content: i(t.content) }))
-  ) : i(S ?? ""), A = a([]), P = a(!1), w = a(T);
-  w.current = T;
-  const D = a(I);
-  D.current = I;
-  const q = a(O);
-  q.current = O;
-  const U = a(Y), W = a(L);
-  W.current = L;
-  const $ = a(M);
-  $.current = M;
-  const V = a(v);
-  V.current = v;
-  const _ = a(l?.agents ?? []);
-  _.current = l?.agents ?? [];
-  const Q = a(l?.teams ?? []);
-  Q.current = l?.teams ?? [];
-  const Z = a(C?.items ?? []);
-  Z.current = C?.items ?? [];
-  const n = Bt({
-    extensions: jt({
-      features: y,
-      placeholder: B.placeholder,
-      maxCharacters: R,
-      characterLimit: st,
+  ) : i(S ?? ""), A = a([]), H = a(!1), w = a(R);
+  w.current = R;
+  const P = a(I);
+  P.current = I;
+  const D = a(O);
+  D.current = O;
+  const q = a(X), U = a(L);
+  U.current = L;
+  const W = a(M);
+  W.current = M;
+  const $ = a(v);
+  $.current = v;
+  const V = a(l?.agents ?? []);
+  V.current = l?.agents ?? [];
+  const _ = a(l?.teams ?? []);
+  _.current = l?.teams ?? [];
+  const Q = a(C?.items ?? []);
+  Q.current = C?.items ?? [];
+  const n = yt({
+    extensions: Jt({
+      features: B,
+      placeholder: y.placeholder,
+      maxCharacters: E,
+      characterLimit: rt,
       hasSections: (k?.length ?? 0) > 0,
       mentions: {
-        agents: l ? _ : void 0,
-        teams: l ? Q : void 0
+        agents: l ? V : void 0,
+        teams: l ? _ : void 0
       },
-      slashCommands: C ? Z : void 0,
-      onPaste: lt,
-      onSend: v ? (t) => V.current?.(t) : void 0,
-      sendShortcut: ct,
-      shortcuts: it,
+      slashCommands: C ? Q : void 0,
+      onPaste: at,
+      onSend: v ? (t) => $.current?.(t) : void 0,
+      sendShortcut: it,
+      shortcuts: st,
       onMentionSelected: l?.onSelect,
       onSlashCommandSelected: C?.onSelect,
       renderMentionItem: l?.renderItem,
@@ -91,38 +87,38 @@ const Ut = (B, x) => {
       renderSlashCommandItem: C?.renderItem,
       renderSlashCommandDropdown: C?.renderDropdown
     }),
-    content: ht,
-    editable: !rt,
+    content: gt,
+    editable: !ot,
     immediatelyRender: !1,
     // SSR-safe — NEVER remove this
     editorProps: {
       attributes: {
         ...J ? { class: J } : {},
-        ...z ? { style: qt(z) } : {}
+        ...F ? { style: zt(F) } : {}
       }
     },
     onUpdate: ({ editor: t }) => {
-      if (D.current?.(nt(t)), m) {
+      if (P.current?.(et(t)), m) {
         const e = p(d(t));
-        N(e.valid ? null : e);
+        j(e.valid ? null : e);
       }
     },
     onTransaction: ({ editor: t }) => {
-      const e = et(t), o = U.current;
-      (o.bold !== e.bold || o.italic !== e.italic || o.underline !== e.underline || o.strike !== e.strike || o.bulletList !== e.bulletList || o.orderedList !== e.orderedList || o.blockquote !== e.blockquote || o.codeBlock !== e.codeBlock || o.superscript !== e.superscript || o.subscript !== e.subscript || o.textAlign !== e.textAlign || o.fontFamily !== e.fontFamily || o.fontSize !== e.fontSize || o.color !== e.color || o.highlight !== e.highlight || o.link?.href !== e.link?.href) && (U.current = e, q.current?.(e));
+      const e = tt(t), o = q.current;
+      (o.bold !== e.bold || o.italic !== e.italic || o.underline !== e.underline || o.strike !== e.strike || o.bulletList !== e.bulletList || o.orderedList !== e.orderedList || o.blockquote !== e.blockquote || o.codeBlock !== e.codeBlock || o.superscript !== e.superscript || o.subscript !== e.subscript || o.textAlign !== e.textAlign || o.fontFamily !== e.fontFamily || o.fontSize !== e.fontSize || o.color !== e.color || o.highlight !== e.highlight || o.link?.href !== e.link?.href) && (q.current = e, D.current?.(e));
     },
-    onFocus: () => W.current?.(),
-    onBlur: () => $.current?.()
+    onFocus: () => U.current?.(),
+    onBlur: () => W.current?.()
   });
   function s(t) {
     n ? t(n) : A.current.push(t);
   }
-  At(() => {
-    if (n && (A.current.length > 0 && A.current.splice(0).forEach((e) => e(n)), P.current || (P.current = !0, w.current?.()), m)) {
+  xt(() => {
+    if (n && (A.current.length > 0 && A.current.splice(0).forEach((e) => e(n)), H.current || (H.current = !0, w.current?.()), m)) {
       const t = p(d(n));
-      N(t.valid ? null : t);
+      j(t.valid ? null : t);
     }
-  }, [n, m]), Et(
+  }, [n, m]), vt(
     x,
     () => ({
       // ── Focus ────────────────────────────────────────────────────────
@@ -139,7 +135,7 @@ const Ut = (B, x) => {
         s((o) => o.commands.insertContent(e));
       },
       insertInlineContent: (t) => {
-        s((e) => Nt(e, t));
+        s((e) => Ot(e, t));
       },
       insertAtStart: (t) => {
         const e = i(t);
@@ -164,7 +160,7 @@ const Ut = (B, x) => {
       appendContent(t) {
         this.appendInline(t);
       },
-      getContent: () => n ? nt(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getContent: () => n ? et(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       getJSON: () => n?.getJSON() ?? null,
       getMentions: () => {
         const t = /* @__PURE__ */ new Set(), e = /* @__PURE__ */ new Set();
@@ -189,7 +185,7 @@ const Ut = (B, x) => {
           return t.doc.textBetween(e, o, " ");
         const c = t.schema.marks.link;
         if (c) {
-          const f = yt(t.doc.resolve(e), c);
+          const f = kt(t.doc.resolve(e), c);
           if (f)
             return t.doc.textBetween(f.from, f.to, " ");
         }
@@ -198,13 +194,13 @@ const Ut = (B, x) => {
       // ── Character count ───────────────────────────────────────────────
       getCharacterCount: () => ({
         count: n?.storage.characterCount?.characters?.() ?? n?.getText().length ?? 0,
-        limit: R ?? null
+        limit: E ?? null
       }),
       // ── Sections ─────────────────────────────────────────────────────
-      getSectionContent: (t) => n ? Ft(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getSectionContent: (t) => n ? Lt(n, t) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setSectionContent: (t, e) => {
         const o = i(e);
-        s((r) => E(r, t, o));
+        s((r) => T(r, t, o));
       },
       focusSection: (t) => {
         s((e) => {
@@ -221,16 +217,16 @@ const Ut = (B, x) => {
         });
       },
       clearSection: (t) => {
-        s((e) => E(e, t, "<p></p>"));
+        s((e) => T(e, t, "<p></p>"));
       },
       // ── Convenience body shorthands ───────────────────────────────────
-      getBodyContent: () => n ? zt(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
+      getBodyContent: () => n ? It(n) : { html: "", text: "", isEmpty: !0, characterCount: 0 },
       setBodyContent: (t) => {
         const e = i(t);
-        s((o) => E(o, "body", e));
+        s((o) => T(o, "body", e));
       },
       setBodyAndSections: (t, e) => {
-        const o = tt(
+        const o = Y(
           i(t),
           e.map((r) => ({
             id: r.id,
@@ -242,7 +238,7 @@ const Ut = (B, x) => {
       appendBodyContent: (t) => {
         const e = i(t);
         s((o) => {
-          const r = ot(o, "body");
+          const r = nt(o, "body");
           o.commands.insertContentAt(r - 1, e, {
             parseOptions: { preserveWhitespace: !0 }
           });
@@ -251,7 +247,7 @@ const Ut = (B, x) => {
       insertAtSectionStart: (t, e) => {
         const o = i(e);
         s((r) => {
-          const c = Ht(r, t);
+          const c = Mt(r, t);
           c !== -1 && r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
@@ -260,14 +256,14 @@ const Ut = (B, x) => {
       insertAtSectionEnd: (t, e) => {
         const o = i(e);
         s((r) => {
-          const c = ot(r, t);
+          const c = nt(r, t);
           r.commands.insertContentAt(c, o, {
             parseOptions: { preserveWhitespace: !0 }
           });
         });
       },
       // ── Formats & actions ─────────────────────────────────────────────
-      getActiveFormats: () => n ? et(n) : Y,
+      getActiveFormats: () => n ? tt(n) : X,
       actions: {
         toggleBold: () => n?.chain().focus().toggleBold().run(),
         toggleItalic: () => n?.chain().focus().toggleItalic().run(),
@@ -286,12 +282,12 @@ const Ut = (B, x) => {
         unsetHighlight: () => n?.chain().focus().unsetHighlight().run(),
         setLink: (t, e) => {
           n && (e !== void 0 ? n.chain().focus().extendMarkRange("link").command(({ tr: o, state: r }) => {
-            const { from: c, to: f } = o.selection, G = r.schema.marks.link;
-            if (!G) return !1;
-            const St = r.schema.text(e, [
-              G.create({ href: t })
-            ]), kt = r.schema.text(" ");
-            return o.replaceWith(c, f, [St, kt]), !0;
+            const { from: c, to: f } = o.selection, Z = r.schema.marks.link;
+            if (!Z) return !1;
+            const Ct = r.schema.text(e, [
+              Z.create({ href: t })
+            ]), St = r.schema.text(" ");
+            return o.replaceWith(c, f, [Ct, St]), !0;
           }).run() : n.chain().focus().extendMarkRange("link").setLink({ href: t }).insertContent(" ").run());
         },
         updateLink: (t) => n?.chain().focus().extendMarkRange("link").setLink({ href: t }).run(),
@@ -308,7 +304,7 @@ const Ut = (B, x) => {
         insertImage: (t) => n?.chain().focus().setImage({ src: t }).run()
       },
       // ── JSON body ─────────────────────────────────────────────────────
-      json: y?.jsonMode ? {
+      json: B?.jsonMode ? {
         getText: () => n ? d(n) : "",
         setText: (t) => s((e) => b(e, t)),
         parse: () => p(n ? d(n) : ""),
@@ -326,48 +322,48 @@ const Ut = (B, x) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [n]
   );
-  const pt = () => {
+  const ht = () => {
     if (!n) return;
     const { valid: t, value: e } = p(d(n));
     !t || e === null || b(n, JSON.stringify(e, null, 2));
-  }, Ct = () => {
-    n && (navigator.clipboard?.writeText(d(n)), j(!0), setTimeout(() => j(!1), 1500));
+  }, pt = () => {
+    n && (navigator.clipboard?.writeText(d(n)), z(!0), setTimeout(() => z(!1), 1500));
   };
   return n ? /* @__PURE__ */ g(
-    It,
+    At,
     {
-      minHeight: dt,
-      maxHeight: ut,
-      tightParagraphs: !y?.richPaste,
+      minHeight: lt,
+      maxHeight: dt,
+      tightParagraphs: !B?.richPaste,
       jsonMode: m,
-      style: mt,
-      className: ft,
+      style: ut,
+      className: mt,
       children: [
-        m && /* @__PURE__ */ g(Lt, { children: [
+        m && /* @__PURE__ */ g(Tt, { children: [
           /* @__PURE__ */ h("span", { className: "bik-json-header-label", children: "JSON" }),
           /* @__PURE__ */ g("div", { className: "bik-json-header-actions", children: [
             /* @__PURE__ */ g(
               "button",
               {
                 type: "button",
-                onClick: pt,
+                onClick: ht,
                 disabled: !!u,
                 title: "Format JSON",
                 children: [
-                  /* @__PURE__ */ h(wt, { size: 16 }),
-                  /* @__PURE__ */ h(X, { children: "Beautify" })
+                  /* @__PURE__ */ h(Nt, { size: 16 }),
+                  /* @__PURE__ */ h(K, { children: "Beautify" })
                 ]
               }
             ),
-            /* @__PURE__ */ g("button", { type: "button", onClick: Ct, title: "Copy JSON", children: [
-              /* @__PURE__ */ h(Dt, { size: 16 }),
-              gt && /* @__PURE__ */ h(X, { children: "Copied" })
+            /* @__PURE__ */ g("button", { type: "button", onClick: pt, title: "Copy JSON", children: [
+              /* @__PURE__ */ h(jt, { size: 16 }),
+              ft && /* @__PURE__ */ h(K, { children: "Copied" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ h(bt, { editor: n }),
-        /* @__PURE__ */ h(Pt, { editor: n, renderLinkTooltip: at?.renderTooltip }),
-        m && u ? F ? F(u) : /* @__PURE__ */ g(Mt, { children: [
+        /* @__PURE__ */ h(Bt, { editor: n }),
+        /* @__PURE__ */ h(Ft, { editor: n, renderLinkTooltip: ct?.renderTooltip }),
+        m && u ? N ? N(u) : /* @__PURE__ */ g(Et, { children: [
           u.line != null && /* @__PURE__ */ g("strong", { children: [
             "Line ",
             u.line,
@@ -380,11 +376,11 @@ const Ut = (B, x) => {
       ]
     }
   ) : null;
-}, Wt = xt(
-  Ut
+}, wt = bt(
+  Ht
 );
-Wt.displayName = "BikEditor";
+wt.displayName = "BikEditor";
 export {
-  Wt as BikEditor
+  wt as BikEditor
 };
 //# sourceMappingURL=BikEditor.js.map