npm - @bikdotai/bik-component-library - Versions diffs - 0.0.875 → 0.0.876-beta.1 - Mend

@bikdotai/bik-component-library 0.0.875 → 0.0.876-beta.1

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 (85) hide show

package/dist/cjs/components/icon-button/IconButton.styled.js CHANGED Viewed

@@ -8,17 +8,17 @@
 	${o.bordered&&o.iconButtonType!=="ai"&&o.iconButtonType!=="primary"?`border: 1px solid ${e.COLORS.stroke.primary};`:""}
 	${o.iconButtonType==="primary"?`
 				background: ${r.generateBackgroundColor("primary")};
-				${o.isSelected?"":`:hover { background-color: ${e.COLORS.background.inverse}; }`}
-				:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
+				${o.isSelected?"":`&:hover { background-color: ${e.COLORS.background.inverse}; }`}
+				&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
 			`:o.isSelected?`background: ${r.generateBackgroundColor(o.iconButtonType)};`:`
-				:hover {
+				&:hover {
 					background-color: rgba(0, 0, 0, 0.03);
 				}
 			`}
 	${o.disabled?o.iconButtonType==="primary"?`
 					cursor: not-allowed !important;
 					background-color: ${e.COLORS.background.inactive};
-					:hover { background-color: ${e.COLORS.background.inactive}; }
+					&:hover { background-color: ${e.COLORS.background.inactive}; }
 				`:`
 					cursor: not-allowed !important;
 					background-color: rgba(0, 0, 0, 0.03);

package/dist/cjs/components/icon-button/IconButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"kPAKaA,EAAaC,EAAAA,QAAO;AAAA,GAO7BC,GAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,cAAgB,OACnBA,EAAM,YACNA,EAAM,OAAS,KACf,EACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,UACNA,EAAM,iBAAmB,MACzBA,EAAM,iBAAmB,UACtB,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,iBAAmB,UACtB;AAAA,kBACaE,EAAAA,wBAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,WAEJ,GADA,~~8BAA8BC,~~EAAAA,OAAO,WAAW,OAAO,~~KAE3D~~;AAAA;AAAA,KAGCD,EAAM,WACN,eAAeE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC,IAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,SACHA,EAAM,iBAAmB,UACxB;AAAA;AAAA,yBAEmBC,EAAAA,OAAO,WAAW,QAAQ;AAAA,~~kCACjBA~~,EAAAA,OAAO,WAAW,QAAQ;AAAA,~~MAEtD~~;AAAA;AAAA;AAAA,MAID,EACJ;AAAA;AAAA,EAEC;AAAA"}
1	+ {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `&:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t&:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":"kPAKaA,EAAaC,EAAAA,QAAO;AAAA,GAO7BC,GAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,cAAgB,OACnBA,EAAM,YACNA,EAAM,OAAS,KACf,EACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,UACNA,EAAM,iBAAmB,MACzBA,EAAM,iBAAmB,UACtB,qBAAqBC,EAAAA,OAAO,OAAO,OAAO,IAC1C,EACJ;AAAA,GAECD,EAAM,iBAAmB,UACtB;AAAA,kBACaE,EAAAA,wBAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,WAEJ,GADA,+BAA+BC,EAAAA,OAAO,WAAW,OAAO,KAE5D;AAAA;AAAA,KAGCD,EAAM,WACN,eAAeE,EAAAA,wBAAwBF,EAAM,cAAc,CAAC,IAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,SACHA,EAAM,iBAAmB,UACxB;AAAA;AAAA,yBAEmBC,EAAAA,OAAO,WAAW,QAAQ;AAAA,mCAChBA,EAAAA,OAAO,WAAW,QAAQ;AAAA,MAEvD;AAAA;AAAA;AAAA,MAID,EACJ;AAAA;AAAA,EAEC;AAAA"}

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

@@ -57,7 +57,7 @@
 	.input--class {
 		border: none;
 		:active,
-		:focus {
+		&:focus {
 			border: none;
 			outline: none;
 		}

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 { 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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"}
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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"}

package/dist/cjs/components/product-picker-v2/style.js CHANGED Viewed

@@ -26,7 +26,7 @@
 	column-gap: 16px;
 	justify-content: space-between;
 	align-items: center;
-	:hover {
+	&:hover {
 		cursor: pointer;
 		background-color: ${i.COLORS.surface.hovered};
 	}
@@ -71,7 +71,7 @@
 	justify-content: flex-start;
 	align-items: center;
 	padding-left: ${t=>t.isVariant?"42px":"16px"};
-	:hover {
+	&:hover {
 		cursor: pointer;
 		background-color: ${i.COLORS.surface.hovered};
 	}

package/dist/cjs/components/product-picker-v2/style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"style.js","sources":["../../../../src/components/product-picker-v2/style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny, TitleSmall } from '../TypographyStyle';\nimport { ScreenName } from './type';\n\nexport const ContainerStyle = styled.div<{ renderWithoutModal?: boolean }>`\n\tdisplay: flex;\n\tbackground-color: white;\n\theight: ${(props) => (props.renderWithoutModal ? '90%' : '75vh')};\n\tflex-direction: column;\n`;\n\nexport const ScrollContainerStyle = styled.div<{ screenName: string }>`\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.screenName !== ScreenName.RearrangeProducts ? '#888' : '#fff'};\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const CollectionCardStyle = styled.div<{\n\tisDisabled: boolean;\n\tisActive: boolean;\n\tusedInSearch: boolean;\n}>`\n\theight: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDisabled\n\t\t\t? '#F0F0F0'\n\t\t\t: props.isActive\n\t\t\t? COLORS.background.positive.light\n\t\t\t: 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: ${(props) => (props.usedInSearch ? '12px 16px' : '12px 24px')};\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: space-between;\n\talign-items: center;\n\t:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const CollectionCardInfoStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tcolumn-gap: 18px;\n`;\n\nexport const CollectionCardDetailStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n`;\n\nexport const ProductScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tmargin-top: 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const ProductScreenCollectionCardStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid #e0e0e0;\n\talign-items: center;\n`;\n\nexport const ProductCardStyle = styled.div<{\n\tisVariant: boolean;\n\tisActive: boolean;\n}>`\n\tmin-height: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isActive ? COLORS.background.positive.light : 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding-left: ${(props) => (props.isVariant ? '42px' : '16px')};\n\t:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const SelectedScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const CollectionNameHolder = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const VariantCardListStyle = styled.div`\n\tmin-height: 72px;\n\tbackground: white;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t.text-container {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tflex: 1;\n\t}\n\n\t.tooltip-title-tag {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\twidth: 100%;\n\t\tgap: 16px;\n\t}\n\t.info-container {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1;\n\t}\n`;\n\nexport const VariantCardGridStyle = styled.div`\n\theight: 72px;\n\twidth: 72px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 16px;\n`;\n\nexport const StyledHeaderRightIcon = styled.div`\n\tdisplay: flex;\n\twidth: 32px;\n\theight: 32px;\n\tpadding: 6px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const StyledFooterForNonModal = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nexport const SKUIDBadge = styled.div`\n\twidth: fit-content;\n\tbackground: ${COLORS.background.brandLight};\n\tpadding: 2px 6px;\n\tborder-radius: 14px;\n`;\n\nexport const EllipsedBodyTiny = styled(BodyTiny)`\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmax-width: 196px;\n\tdisplay: block;\n\tcolor: ${COLORS.background.inverseLight};\n`;\n\nexport const ProductSubTitle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 5px;\n`;\nexport const ProductInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n`;\n\nexport const StyledTitleSmall = styled(TitleSmall)`\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: block;\n`;\n"],"names":["ContainerStyle","styled","props","ScrollContainerStyle","ScreenName","CollectionCardStyle","COLORS","CollectionCardInfoStyle","CollectionCardDetailStyle","ProductScreenHeader","ProductScreenCollectionCardStyle","ProductCardStyle","SelectedScreenHeader","CollectionNameHolder","VariantCardListStyle","VariantCardGridStyle","StyledFooterForNonModal","SKUIDBadge","EllipsedBodyTiny","BodyTiny","ProductSubTitle","ProductInfo","TitleSmall"],"mappings":"oRAKaA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA,WAGzBC,GAAWA,EAAM,mBAAqB,MAAQ,MAAO;AAAA;AAAA,EAIpDC,EAAuBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpBC,GACpBA,EAAM,aAAeE,EAAAA,WAAW,kBAAoB,OAAS,MAAM;AAAA;AAAA;AAAA,EAKzDC,EAAsBJ,EAAAA,QAAO;AAAA;AAAA,qBAMpBC,GACpBA,EAAM,WACH,UACAA,EAAM,SACNI,EAAAA,OAAO,WAAW,SAAS,MAC3B,OAAO;AAAA;AAAA,YAECJ,GAAWA,EAAM,aAAe,YAAc,WAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQjDI,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI/BC,EAA0BN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjCO,EAA4BP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMnCQ,EAAsBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrBK,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU9BI,EAAmCT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS1CU,EAAmBV,EAAAA,QAAO;AAAA;AAAA,qBAKjBC,GACpBA,EAAM,SAAWI,EAAAA,OAAO,WAAW,SAAS,MAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3CJ,GAAWA,EAAM,UAAY,OAAS,MAAO;AAAA;AAAA;AAAA,sBAGzCI,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI/BM,EAAuBX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtBK,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BO,EAAuBZ,EAAAA,QAAO;AAAA;AAAA;AAAA,EAK9Ba,EAAuBb,EAAAA,QAAO;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,EA8B9Bc,EAAuBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASNA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOvBK,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAInC,MAAMU,EAA0Bf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASjCgB,EAAahB,EAAAA,QAAO;AAAA;AAAA,eAElBK,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA,EAK9BY,EAAmBjB,EAAAA,QAAOkB,UAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrCb,EAAAA,OAAO,WAAW,YAAY;AAAA,EAG3Bc,EAAkBnB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzBoB,EAAcpB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQFA,EAAAA,QAAOqB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"style.js","sources":["../../../../src/components/product-picker-v2/style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { BodyTiny, TitleSmall } from '../TypographyStyle';\nimport { ScreenName } from './type';\n\nexport const ContainerStyle = styled.div<{ renderWithoutModal?: boolean }>`\n\tdisplay: flex;\n\tbackground-color: white;\n\theight: ${(props) => (props.renderWithoutModal ? '90%' : '75vh')};\n\tflex-direction: column;\n`;\n\nexport const ScrollContainerStyle = styled.div<{ screenName: string }>`\n\toverflow-y: scroll;\n\toverflow-x: hidden;\n\n\t::-webkit-scrollbar {\n\t\tdisplay: block;\n\t\twidth: 8px;\n\t}\n\n\t::-webkit-scrollbar-thumb {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.screenName !== ScreenName.RearrangeProducts ? '#888' : '#fff'};\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const CollectionCardStyle = styled.div<{\n\tisDisabled: boolean;\n\tisActive: boolean;\n\tusedInSearch: boolean;\n}>`\n\theight: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isDisabled\n\t\t\t? '#F0F0F0'\n\t\t\t: props.isActive\n\t\t\t? COLORS.background.positive.light\n\t\t\t: 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: ${(props) => (props.usedInSearch ? '12px 16px' : '12px 24px')};\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: space-between;\n\talign-items: center;\n\t&:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const CollectionCardInfoStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tcolumn-gap: 18px;\n`;\n\nexport const CollectionCardDetailStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n`;\n\nexport const ProductScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tmargin-top: 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const ProductScreenCollectionCardStyle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tpadding: 12px 16px;\n\tborder-bottom: 1px solid #e0e0e0;\n\talign-items: center;\n`;\n\nexport const ProductCardStyle = styled.div<{\n\tisVariant: boolean;\n\tisActive: boolean;\n}>`\n\tmin-height: 64px;\n\tbackground-color: ${(props) =>\n\t\tprops.isActive ? COLORS.background.positive.light : 'white'};\n\tborder-bottom: 1px solid #e0e0e0;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tcolumn-gap: 16px;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding-left: ${(props) => (props.isVariant ? '42px' : '16px')};\n\t&:hover {\n\t\tcursor: pointer;\n\t\tbackground-color: ${COLORS.surface.hovered};\n\t}\n`;\n\nexport const SelectedScreenHeader = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmax-height: 32px;\n\tmin-height: 32px;\n\tbackground-color: ${COLORS.background.base};\n\tjustify-content: flex-start;\n\talign-items: center;\n\tpadding: 8px 16px;\n\tposition: sticky;\n\ttop: 0;\n\tz-index: 10;\n`;\n\nexport const CollectionNameHolder = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n`;\n\nexport const VariantCardListStyle = styled.div`\n\tmin-height: 72px;\n\tbackground: white;\n\tpadding: 12px 16px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\n\t.text-container {\n\t\tdisplay: flex;\n\t\tgap: 16px;\n\t\tflex: 1;\n\t}\n\n\t.tooltip-title-tag {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\twidth: 100%;\n\t\tgap: 16px;\n\t}\n\t.info-container {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tflex: 1;\n\t}\n`;\n\nexport const VariantCardGridStyle = styled.div`\n\theight: 72px;\n\twidth: 72px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 16px;\n`;\n\nexport const StyledHeaderRightIcon = styled.div`\n\tdisplay: flex;\n\twidth: 32px;\n\theight: 32px;\n\tpadding: 6px;\n\tjustify-content: center;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n`;\n\nexport const StyledFooterForNonModal = styled.div`\n\tpadding: 16px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tmargin-top: auto;\n\twidth: 100%;\n`;\n\nexport const SKUIDBadge = styled.div`\n\twidth: fit-content;\n\tbackground: ${COLORS.background.brandLight};\n\tpadding: 2px 6px;\n\tborder-radius: 14px;\n`;\n\nexport const EllipsedBodyTiny = styled(BodyTiny)`\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tmax-width: 196px;\n\tdisplay: block;\n\tcolor: ${COLORS.background.inverseLight};\n`;\n\nexport const ProductSubTitle = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 5px;\n`;\nexport const ProductInfo = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 8px;\n\tmin-width: 0;\n`;\n\nexport const StyledTitleSmall = styled(TitleSmall)`\n\toverflow: hidden;\n\twhite-space: nowrap;\n\ttext-overflow: ellipsis;\n\tdisplay: block;\n`;\n"],"names":["ContainerStyle","styled","props","ScrollContainerStyle","ScreenName","CollectionCardStyle","COLORS","CollectionCardInfoStyle","CollectionCardDetailStyle","ProductScreenHeader","ProductScreenCollectionCardStyle","ProductCardStyle","SelectedScreenHeader","CollectionNameHolder","VariantCardListStyle","VariantCardGridStyle","StyledFooterForNonModal","SKUIDBadge","EllipsedBodyTiny","BodyTiny","ProductSubTitle","ProductInfo","TitleSmall"],"mappings":"oRAKaA,EAAiBC,EAAAA,QAAO;AAAA;AAAA;AAAA,WAGzBC,GAAWA,EAAM,mBAAqB,MAAQ,MAAO;AAAA;AAAA,EAIpDC,EAAuBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUpBC,GACpBA,EAAM,aAAeE,EAAAA,WAAW,kBAAoB,OAAS,MAAM;AAAA;AAAA;AAAA,EAKzDC,EAAsBJ,EAAAA,QAAO;AAAA;AAAA,qBAMpBC,GACpBA,EAAM,WACH,UACAA,EAAM,SACNI,EAAAA,OAAO,WAAW,SAAS,MAC3B,OAAO;AAAA;AAAA,YAECJ,GAAWA,EAAM,aAAe,YAAc,WAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQjDI,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI/BC,EAA0BN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQjCO,EAA4BP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMnCQ,EAAsBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrBK,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU9BI,EAAmCT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS1CU,EAAmBV,EAAAA,QAAO;AAAA;AAAA,qBAKjBC,GACpBA,EAAM,SAAWI,EAAAA,OAAO,WAAW,SAAS,MAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ3CJ,GAAWA,EAAM,UAAY,OAAS,MAAO;AAAA;AAAA;AAAA,sBAGzCI,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI/BM,EAAuBX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtBK,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS9BO,EAAuBZ,EAAAA,QAAO;AAAA;AAAA;AAAA,EAK9Ba,EAAuBb,EAAAA,QAAO;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,EA8B9Bc,EAAuBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASNA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOvBK,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,EAInC,MAAMU,EAA0Bf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASjCgB,EAAahB,EAAAA,QAAO;AAAA;AAAA,eAElBK,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA;AAAA,EAK9BY,EAAmBjB,EAAAA,QAAOkB,UAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrCb,EAAAA,OAAO,WAAW,YAAY;AAAA,EAG3Bc,EAAkBnB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzBoB,EAAcpB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQFA,EAAAA,QAAOqB,YAAU;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/switch/Switch.js CHANGED Viewed

@@ -15,13 +15,13 @@
 	transition: ${e=>`${e.duration/1e3}s ease all`};
 	align-items: center;
 	cursor: ${e=>e.disabled?"default":"pointer"};
-	:focus {
+	&:focus {
 		outline: ${e=>e.value?e.outlineColor.true:e.outlineColor.false};
 		outline-style: solid;
 		outline-offset: 2px;
 		outline-width: 2px;
 	}
-	:active {
+	&:active {
 		outline: ${e=>e.value?e.outlineColor.true:e.outlineColor.false};
 		outline-style: solid;
 		outline-offset: 2px;

package/dist/cjs/components/switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.type';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}
1	+ {"version":3,"file":"Switch.js","sources":["../../../../src/components/switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useEffect, useState } from 'react';\nimport styled from 'styled-components';\nimport { COLORS, DEFAULT_THEME } from '@src/constants/Theme';\nimport { SwitchColorProps, SwitchProps } from './Switch.type';\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n\t({\n\t\tcustomThumbColor,\n\t\ttrackColor,\n\t\ttrackHeight,\n\t\ttrackLength,\n\t\tdisabled,\n\t\tvalue: propsValue,\n\t\tonValueChange,\n\t\tduration,\n\t\tcontainerStyle,\n\t\ttype,\n\t\tisLoading,\n\t\t'data-test': dataTest,\n\t}) => {\n\t\tconst { colorsV2 } = DEFAULT_THEME;\n\n\t\tconst [value, setValue] = useState<boolean>(propsValue);\n\n\t\tconst [isloading, setLoading] = useState<boolean>(isLoading ?? false);\n\t\tconst durationTime = duration ?? 200;\n\n\t\tuseEffect(() => {\n\t\t\tif (typeof isLoading == 'boolean') {\n\t\t\t\tsetLoading(isLoading);\n\t\t\t}\n\t\t}, [isLoading]);\n\n\t\tuseEffect(() => {\n\t\t\tsetValue(propsValue);\n\t\t}, [propsValue]);\n\n\t\tconst consolidatedTrackColor: SwitchColorProps = disabled\n\t\t\t? {\n\t\t\t\t\tfalse: colorsV2.background.inactive,\n\t\t\t\t\ttrue: colorsV2.background.inactive,\n\t\t\t }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttrackColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.negative.light\n\t\t\t\t\t\t\t: colorsV2.background.base,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttrackColor?.true ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t\t\t: colorsV2.background.brand,\n\t\t\t };\n\n\t\tconst consolidatedBorderColor: SwitchColorProps = {\n\t\t\tfalse:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\ttrue:\n\t\t\t\ttype === 'greenred'\n\t\t\t\t\t? colorsV2.background.positive.vibrant\n\t\t\t\t\t: colorsV2.background.brand,\n\t\t};\n\n\t\tconst consolidatedThumbColor: SwitchColorProps = disabled\n\t\t\t? { false: colorsV2.content.inactive, true: colorsV2.content.inactive }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\tcustomThumbColor?.false ?? type === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.content.negative\n\t\t\t\t\t\t\t: colorsV2.text.primary,\n\t\t\t\t\ttrue: customThumbColor?.true ?? colorsV2.surface.standard,\n\t\t\t };\n\n\t\tconst consolidateOutlineColor: SwitchColorProps = !type\n\t\t\t? { false: colorsV2.stroke.primary, true: colorsV2.stroke.primary }\n\t\t\t: {\n\t\t\t\t\tfalse:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.negative.lightAlt\n\t\t\t\t\t\t\t: colorsV2.stroke.primary,\n\t\t\t\t\ttrue:\n\t\t\t\t\t\ttype === 'greenred'\n\t\t\t\t\t\t\t? colorsV2.stroke.positive.lightAlt\n\t\t\t\t\t\t\t: colorsV2.background.brandLight,\n\t\t\t };\n\n\t\tasync function handlePress() {\n\t\t\tif (disabled) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(true);\n\t\t\t}\n\t\t\ttry {\n\t\t\t\tawait onValueChange?.(!value);\n\t\t\t\tsetValue(!value);\n\t\t\t} catch (err) {\n\t\t\t\tconsole.log(err);\n\t\t\t}\n\t\t\tif (typeof isLoading !== 'boolean') {\n\t\t\t\tsetLoading(false);\n\t\t\t}\n\t\t}\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<SwitchContainer\n\t\t\t\t\tdata-test={dataTest}\n\t\t\t\t\ttrackLength={trackLength ?? 40}\n\t\t\t\t\ttrackHeight={trackHeight ?? 20}\n\t\t\t\t\tonClick={() => handlePress()}\n\t\t\t\t\ttrackColor={consolidatedTrackColor}\n\t\t\t\t\tvalue={value}\n\t\t\t\t\tstyle={containerStyle}\n\t\t\t\t\tborderColor={consolidatedBorderColor}\n\t\t\t\t\tduration={durationTime}\n\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\toutlineColor={consolidateOutlineColor}\n\t\t\t\t>\n\t\t\t\t\t{isloading ? (\n\t\t\t\t\t\t<Loader value={value} trackColor={consolidatedTrackColor} />\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Thumb\n\t\t\t\t\t\t\tvalue={value}\n\t\t\t\t\t\t\tduration={durationTime}\n\t\t\t\t\t\t\tthumbColor={consolidatedThumbColor}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</SwitchContainer>\n\t\t\t</>\n\t\t);\n\t},\n);\n\nSwitch.displayName = 'Switch';\n\nexport const SwitchContainer = styled.div<{\n\ttrackLength: number;\n\ttrackHeight: number;\n\ttrackColor: SwitchColorProps;\n\tvalue: boolean;\n\tborderColor: SwitchColorProps;\n\tduration: number;\n\tdisabled?: boolean;\n\toutlineColor: SwitchColorProps;\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\tmargin-top: 5px;\n\tmargin-bottom: 5px;\n\tborder-radius: 30px;\n\tbackground-color: red;\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\twidth: ${(props) => props.trackLength + 'px'};\n\theight: ${(props) => props.trackHeight + 'px'};\n\tborder-width: ${(props) => (props.disabled ? '0px' : '1px')};\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.borderColor.true : props.borderColor.false};\n\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\talign-items: center;\n\tcursor: ${(props) => (props.disabled ? 'default' : 'pointer')};\n\t&:focus {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n\t&:active {\n\t\toutline: ${(props) =>\n\t\t\tprops.value ? props.outlineColor.true : props.outlineColor.false};\n\t\toutline-style: solid;\n\t\toutline-offset: 2px;\n\t\toutline-width: 2px;\n\t}\n`;\n\nexport const Thumb = styled.div<{\n\tvalue: boolean;\n\tduration: number;\n\tthumbColor: SwitchColorProps;\n}>`\n\theight: 12px;\n\twidth: 12px;\n\tmargin: 4px;\n\tborder-radius: 8px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\ttransition: ${(props) => `${props.duration / 1000}s ease all`};\n\tbackground-color: ${(props) =>\n\t\tprops.value ? props.thumbColor.true : props.thumbColor.false};\n`;\n\nexport const Loader = styled.div<{\n\tvalue: boolean;\n\ttrackColor: SwitchColorProps;\n}>`\n\tborder-width: 2px;\n\tborder-style: solid;\n\tborder-color: ${(props) =>\n\t\tprops.value ? props.trackColor.true : props.trackColor.false};\n\tborder-top-width: 2px;\n\tborder-top-style: solid;\n\tborder-top-color: ${(props) =>\n\t\tprops.value ? COLORS.text.white : COLORS.background.brand};\n\tborder-radius: 50%;\n\theight: 8px;\n\twidth: 8px;\n\tmargin: 4px;\n\tposition: relative;\n\tleft: ${(props) => (props.value ? 'calc(100% - 20px)' : '0px')};\n\tanimation: spin 1s linear infinite;\n\t@keyframes spin {\n\t\t0% {\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\t\t100% {\n\t\t\ttransform: rotate(360deg);\n\t\t}\n\t}\n`;\n"],"names":["Switch","forwardRef","customThumbColor","trackColor","trackHeight","trackLength","disabled","propsValue","onValueChange","duration","containerStyle","type","isLoading","dataTest","colorsV2","DEFAULT_THEME","value","setValue","useState","isloading","setLoading","durationTime","useEffect","consolidatedTrackColor","consolidatedBorderColor","consolidatedThumbColor","consolidateOutlineColor","handlePress","err","jsx","Fragment","SwitchContainer","Loader","Thumb","styled","props","COLORS"],"mappings":"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"}

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js CHANGED Viewed

@@ -27,7 +27,7 @@
 	${e=>e.needBorder?e.showDashedBorder?`border: 2px dashed ${o.COLORS.content.brand};`:e.hasError?`border: 2px solid ${o.COLORS.content.negative};`:e.showBorder?`border: 2px solid ${o.COLORS.stroke.brand};`:`border: 2px solid ${o.COLORS.stroke.primary};`:"border: none;"}
-	:hover {
+	&:hover {
 		${e=>e.isPreview||!e.needBorder?"":`
 				border: 2px ${e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"} ${o.COLORS.stroke.brand};
 				box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);

package/dist/cjs/components/template-preview/RCS/RCSPreview.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t:hover {\n\t\t${(props) => {\n\t\t\tif (props.isPreview \|\| !props.needBorder) return '';\n\n\t\t\tconst borderStyle = props.isWhatsappCarousel\n\t\t\t\t? props.hasError\n\t\t\t\t\t? 'dashed'\n\t\t\t\t\t: props.showBorder\n\t\t\t\t\t? 'solid'\n\t\t\t\t\t: 'dashed'\n\t\t\t\t: 'solid';\n\n\t\t\treturn `\n\t\t\t\tborder: 2px ${borderStyle} ${COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`;\n\t\t}}\n\t}\n\n\t.text--template {\n\t\tborder: 2px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 12px;\n\t\tflex: 1;\n\t}\n`;\n\nexport const RCSChatBtnContainer = styled.div`\n\tpadding: 12px 0px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\nexport const RCSMediaContainer = styled.div<{ isHorizontal: boolean }>`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: ${(props) => (props.isHorizontal ? '' : '4px')};\n\twidth: ${(props) => (props.isHorizontal ? '50%' : 'auto')};\n`;\nexport const RCSPdfContainer = styled.div`\n\tborder-radius: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 4px;\n\tbackground-color: #ede7e8;\n\tmargin: 4px;\n\tmax-width: 200px;\n`;\nexport const PdfComineText = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tmargin-left: 4px;\n\tmax-width: 180px;\n`;\nexport const PdfText = styled.p`\n\twhite-space: nowrap;\n\tcolor: #4c5567;\n\tmax-width: 100px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: 0px;\n\tmargin: 0px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tline-width: 20px;\n`;\n\nexport const RCSCarousalContainer = styled.div<{ borderRadius?: string }>`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tposition: relative;\n\theight: 500px;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '8px'};\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\tbackground-color: white;\n`;\n\n/* header */\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: ${COLORS.background.inactive};\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-bottom: 0px;\n`;\n"],"names":["styled","props","RcsHtmlContainer","COLORS","HeaderTextContainer","TitleTextContainer","RCSPreviewContainer","RCSChatBtnContainer","RCSMediaContainer","RCSPdfContainer","PdfComineText","PdfText","RCSCarousalContainer","HeaderContainer","LeftContainer","IconContainer","TitleContainer","SubTitle"],"mappings":"6NAI4BA,EAAAA,QAAO;AAAA,qBAIbC,GAAWA,EAAM,WAAa,UAAY,OAAQ;AAAA;AAAA;AAAA,WAG5DA,GAAWA,EAAM,WAAa,OAAS,MAAO;AAAA,EAGnD,MAAMC,EAAmBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAInBC,EAAsBJ,EAAAA,QAAOE,CAAgB;AAAA;AAAA;AAAA,EAK7CG,EAAqBL,EAAAA,QAAOE,CAAgB;AAAA;AAAA,EAG5CI,EAAsBN,EAAAA,QAAO;AAAA,eAU3BG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKlBF,GAClBA,EAAM,wBAA0B,MAAQ,QAAQ;AAAA;AAAA,GAE9CA,GACGA,EAAM,WACPA,EAAM,iBACF,sBAAsBE,EAAAA,OAAO,QAAQ,KAAK,IAC9CF,EAAM,SAAiB,qBAAqBE,EAAAA,OAAO,QAAQ,QAAQ,IACnEF,EAAM,WAAmB,qBAAqBE,EAAAA,OAAO,OAAO,KAAK,IAC9D,qBAAqBA,EAAAA,OAAO,OAAO,OAAO,IALnB,eAM9B;AAAA;AAAA;AAAA,IAGGF,GACEA,EAAM,WAAa,CAACA,EAAM,WAAmB,GAU1C;AAAA,kBARaA,EAAM,mBACvBA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OAGuB,IAAIE,SAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAsBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7BQ,EAAoBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOrBC,GAAWA,EAAM,aAAe,GAAK,KAAM;AAAA,UACnDA,GAAWA,EAAM,aAAe,MAAQ,MAAO;AAAA,EAE7CQ,EAAkBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzBU,EAAgBV,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvBW,EAAUX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBY,EAAuBZ,EAAAA,QAAO;AAAA,qBACtBG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIvBF,GAAUA,EAAM,cAAgB,KAAK;AAAA;AAAA;AAAA,EAM3CY,EAAkBb,EAAAA,QAAO;AAAA;AAAA,qBAEjBG,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWlCW,EAAgBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBe,EAAgBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBgB,EAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAWjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA"}
1	+ {"version":3,"file":"RCSPreview.styled.js","sources":["../../../../../src/components/template-preview/RCS/RCSPreview.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { RCS_TEMPLATE_TYPE } from '../models/RCSTemplate';\n\nexport const RCSContainer = styled.div<{\n\tisCarousal?: boolean;\n\ttemplateType?: RCS_TEMPLATE_TYPE;\n}>`\n\tbackground-color: ${(props) => (props.isCarousal ? '#E0E0E0' : `white`)};\n\tborder-radius: 4px;\n\tposition: relative;\n\theight: ${(props) => (props.isCarousal ? '100%' : 'auto')};\n`;\n\nexport const RcsHtmlContainer = styled.div`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tpadding: 12px;\n\tcolor: ${COLORS.content.primary};\n\tword-wrap: break-word;\n`;\n\nexport const HeaderTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n\tmargin-bottom: 8px;\n`;\n\nexport const TitleTextContainer = styled(RcsHtmlContainer)`\n\tfont-weight: 600;\n`;\nexport const RCSPreviewContainer = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n\tneedBorder?: boolean;\n\tisHorizontalOrientation?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 12px;\n\tposition: relative;\n\theight: 100%;\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.isHorizontalOrientation ? 'row' : 'column'};\n\n\t${(props) => {\n\t\tif (!props.needBorder) return `border: none;`;\n\t\tif (props.showDashedBorder)\n\t\t\treturn `border: 2px dashed ${COLORS.content.brand};`;\n\t\tif (props.hasError) return `border: 2px solid ${COLORS.content.negative};`;\n\t\tif (props.showBorder) return `border: 2px solid ${COLORS.stroke.brand};`;\n\t\treturn `border: 2px solid ${COLORS.stroke.primary};`;\n\t}}\n\n\t&:hover {\n\t\t${(props) => {\n\t\t\tif (props.isPreview \|\| !props.needBorder) return '';\n\n\t\t\tconst borderStyle = props.isWhatsappCarousel\n\t\t\t\t? props.hasError\n\t\t\t\t\t? 'dashed'\n\t\t\t\t\t: props.showBorder\n\t\t\t\t\t? 'solid'\n\t\t\t\t\t: 'dashed'\n\t\t\t\t: 'solid';\n\n\t\t\treturn `\n\t\t\t\tborder: 2px ${borderStyle} ${COLORS.stroke.brand};\n\t\t\t\tbox-shadow: 4px 4px 12px rgba(0, 0, 0, 0.25);\n\t\t\t`;\n\t\t}}\n\t}\n\n\t.text--template {\n\t\tborder: 2px solid ${COLORS.stroke.primary};\n\t\tborder-radius: 12px;\n\t\tflex: 1;\n\t}\n`;\n\nexport const RCSChatBtnContainer = styled.div`\n\tpadding: 12px 0px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: flex-start;\n\talign-items: center;\n\tgap: 12px;\n\tflex-wrap: wrap;\n`;\n\nexport const RCSMediaContainer = styled.div<{ isHorizontal: boolean }>`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: ${(props) => (props.isHorizontal ? '' : '4px')};\n\twidth: ${(props) => (props.isHorizontal ? '50%' : 'auto')};\n`;\nexport const RCSPdfContainer = styled.div`\n\tborder-radius: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tpadding: 4px;\n\tbackground-color: #ede7e8;\n\tmargin: 4px;\n\tmax-width: 200px;\n`;\nexport const PdfComineText = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: flex-start;\n\tmargin-left: 4px;\n\tmax-width: 180px;\n`;\nexport const PdfText = styled.p`\n\twhite-space: nowrap;\n\tcolor: #4c5567;\n\tmax-width: 100px;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\tpadding: 0px;\n\tmargin: 0px;\n\tfont-size: 12px;\n\tfont-weight: 500;\n\tline-width: 20px;\n`;\n\nexport const RCSCarousalContainer = styled.div<{ borderRadius?: string }>`\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tposition: relative;\n\theight: 500px;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '8px'};\n\tbox-shadow: 0px 2px 8px 0px #0000001f;\n\tbackground-color: white;\n`;\n\n/* header */\nexport const HeaderContainer = styled.div`\n\theight: 50px;\n\tbackground-color: ${COLORS.background.inactive};\n\tposition: sticky;\n\ttop: 0px;\n\tz-index: 200;\n\tpadding: 6px 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tgap: 5px;\n`;\n\nexport const LeftContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 5px;\n`;\n\nexport const IconContainer = styled.div`\n\theight: 27px;\n\twidth: 27px;\n\tborder-radius: 15px;\n\tbackground-color: #d1d8db;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 6px;\n`;\n\nexport const TitleContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: space-between;\n`;\n\nexport const SubTitle = styled.p`\n\tfont-family: 'Inter';\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 8px;\n\tline-height: 11px;\n\tcolor: ${COLORS.content.secondary};\n\tmargin-bottom: 0px;\n`;\n"],"names":["styled","props","RcsHtmlContainer","COLORS","HeaderTextContainer","TitleTextContainer","RCSPreviewContainer","RCSChatBtnContainer","RCSMediaContainer","RCSPdfContainer","PdfComineText","PdfText","RCSCarousalContainer","HeaderContainer","LeftContainer","IconContainer","TitleContainer","SubTitle"],"mappings":"6NAI4BA,EAAAA,QAAO;AAAA,qBAIbC,GAAWA,EAAM,WAAa,UAAY,OAAQ;AAAA;AAAA;AAAA,WAG5DA,GAAWA,EAAM,WAAa,OAAS,MAAO;AAAA,EAGnD,MAAMC,EAAmBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAInBC,EAAsBJ,EAAAA,QAAOE,CAAgB;AAAA;AAAA;AAAA,EAK7CG,EAAqBL,EAAAA,QAAOE,CAAgB;AAAA;AAAA,EAG5CI,EAAsBN,EAAAA,QAAO;AAAA,eAU3BG,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKlBF,GAClBA,EAAM,wBAA0B,MAAQ,QAAQ;AAAA;AAAA,GAE9CA,GACGA,EAAM,WACPA,EAAM,iBACF,sBAAsBE,EAAAA,OAAO,QAAQ,KAAK,IAC9CF,EAAM,SAAiB,qBAAqBE,EAAAA,OAAO,QAAQ,QAAQ,IACnEF,EAAM,WAAmB,qBAAqBE,EAAAA,OAAO,OAAO,KAAK,IAC9D,qBAAqBA,EAAAA,OAAO,OAAO,OAAO,IALnB,eAM9B;AAAA;AAAA;AAAA,IAGGF,GACEA,EAAM,WAAa,CAACA,EAAM,WAAmB,GAU1C;AAAA,kBARaA,EAAM,mBACvBA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OAGuB,IAAIE,SAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAsBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAU7BQ,EAAoBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOrBC,GAAWA,EAAM,aAAe,GAAK,KAAM;AAAA,UACnDA,GAAWA,EAAM,aAAe,MAAQ,MAAO;AAAA,EAE7CQ,EAAkBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWzBU,EAAgBV,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQvBW,EAAUX,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAajBY,EAAuBZ,EAAAA,QAAO;AAAA,qBACtBG,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIvBF,GAAUA,EAAM,cAAgB,KAAK;AAAA;AAAA;AAAA,EAM3CY,EAAkBb,EAAAA,QAAO;AAAA;AAAA,qBAEjBG,EAAAA,OAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWlCW,EAAgBd,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMvBe,EAAgBf,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWvBgB,EAAiBhB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBiB,EAAWjB,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA"}

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js CHANGED Viewed

@@ -12,7 +12,7 @@
 	height: ${e=>e.isWhatsappCarousel?"100%":"auto"};
 	display: flex;
 	flex-direction: column;
-	:hover {
+	&:hover {
 		border: 2px
 			${e=>e.isPreview?"unset":e.isWhatsappCarousel?e.hasError?"dashed":e.showBorder?"solid":"dashed":"solid"}
 			${t.COLORS.stroke.brand};

package/dist/cjs/components/template-preview/WhatsApp/ChatUI.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t:hover {\n\t\tborder: 2px\n\t\t\t${(props) =>\n\t\t\t\t!props.isPreview\n\t\t\t\t\t? props.isWhatsappCarousel\n\t\t\t\t\t\t? props.hasError\n\t\t\t\t\t\t\t? 'dashed'\n\t\t\t\t\t\t\t: props.showBorder\n\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t: 'dashed'\n\t\t\t\t\t\t: 'solid'\n\t\t\t\t\t: 'unset'}\n\t\t\t${COLORS.stroke.brand};\n\t\tbox-shadow: ${(props) =>\n\t\t\t!props.isPreview && '4px 4px 12px rgba(0, 0, 0, 0.25)'};\n\t}\n`;\n\nexport const TimeStamp = styled(Caption)`\n\tcolor: ${COLORS.content.secondary};\n\tmax-width: 80px;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-wrap: wrap;\n`;\n\nexport const FooterText = styled(TimeStamp)`\n\tmax-width: 200px;\n`;\n\nexport const MediaContainer = styled.div`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: 4px;\n\tmargin: 0px 8px;\n`;\n\nexport const ChatBtnContainer = styled.div`\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const FooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin: 8px 12px;\n`;\n\nexport const MediaNameAbsWrapper = styled.div`\n\tposition: absolute;\n\tbottom: -1px;\n\tleft: 0;\n\ttext-align: center;\n\twidth: 100%;\n\tpadding: 10px;\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: start;\n\tbackground: ${COLORS.surface.hovered};\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n`;\n\nexport const DownloadMediaIconHolder = styled.div`\n\tposition: absolute;\n\ttop: 16px;\n\tright: 16px;\n`;\n"],"names":["Container","styled","COLORS","props","TimeStamp","Caption","FooterText","MediaContainer","ChatBtnContainer","FooterWrapper"],"mappings":"mQAIaA,EAAYC,EAAAA,QAAO;AAAA,eAQjBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,2BACVC,GAAWA,EAAM,eAAiB,OAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxEA,GACFA,EAAM,SACH,GAAGD,EAAAA,OAAO,QAAQ,QAAQ,GAC1BC,EAAM,WACN,GAAGD,EAAAA,OAAO,OAAO,KAAK,GACtB,GAAGA,SAAO,OAAO,OAAO,EAAE;AAAA,WACpBC,GACVA,EAAM,kBAAoB,cAAcD,SAAO,QAAQ,KAAK,EAAE;AAAA,WACpDC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK5DA,GACDA,EAAM,UAQJ,QAPAA,EAAM,mBACLA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OACM;AAAA,KACTD,EAAAA,OAAO,OAAO,KAAK;AAAA,gBACPC,GACd,CAACA,EAAM,WAAa,kCAAkC;AAAA;AAAA,EAI5CC,EAAYH,EAAAA,QAAOI,SAAO;AAAA,UAC7BH,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrBI,EAAaL,EAAAA,QAAOG,CAAS;AAAA;AAAA,EAI7BG,EAAiBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBO,EAAmBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGjCO,EAAgBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAODA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKED,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"ChatUI.style.js","sources":["../../../../../src/components/template-preview/WhatsApp/ChatUI.style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Caption } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tisCarouselCard?: boolean;\n\tshowBorder?: boolean;\n\tshowDashedBorder?: boolean;\n\tisWhatsappCarousel?: boolean;\n\thasError?: boolean;\n\tisPreview?: boolean;\n}>`\n\tbackground: ${COLORS.surface.standard};\n\tborder-top-left-radius: ${(props) => (props.isCarouselCard ? '12px' : '0px')};\n\tborder-top-right-radius: 12px;\n\tborder-bottom-right-radius: 12px;\n\tborder-bottom-left-radius: 12px;\n\tposition: relative;\n\tpadding: 8px 0px;\n\tborder: 2px solid\n\t\t${(props) =>\n\t\t\tprops.hasError\n\t\t\t\t? `${COLORS.content.negative}`\n\t\t\t\t: props.showBorder\n\t\t\t\t? `${COLORS.stroke.brand}`\n\t\t\t\t: `${COLORS.stroke.primary}`};\n\tborder: ${(props) =>\n\t\tprops.showDashedBorder && `2px dashed ${COLORS.content.brand}`};\n\theight: ${(props) => (props.isWhatsappCarousel ? '100%' : 'auto')};\n\tdisplay: flex;\n\tflex-direction: column;\n\t&:hover {\n\t\tborder: 2px\n\t\t\t${(props) =>\n\t\t\t\t!props.isPreview\n\t\t\t\t\t? props.isWhatsappCarousel\n\t\t\t\t\t\t? props.hasError\n\t\t\t\t\t\t\t? 'dashed'\n\t\t\t\t\t\t\t: props.showBorder\n\t\t\t\t\t\t\t? 'solid'\n\t\t\t\t\t\t\t: 'dashed'\n\t\t\t\t\t\t: 'solid'\n\t\t\t\t\t: 'unset'}\n\t\t\t${COLORS.stroke.brand};\n\t\tbox-shadow: ${(props) =>\n\t\t\t!props.isPreview && '4px 4px 12px rgba(0, 0, 0, 0.25)'};\n\t}\n`;\n\nexport const TimeStamp = styled(Caption)`\n\tcolor: ${COLORS.content.secondary};\n\tmax-width: 80px;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-wrap: wrap;\n`;\n\nexport const FooterText = styled(TimeStamp)`\n\tmax-width: 200px;\n`;\n\nexport const MediaContainer = styled.div`\n\tborder-radius: 8px;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tmin-height: 152px;\n\tmargin-bottom: 4px;\n\tmargin: 0px 8px;\n`;\n\nexport const ChatBtnContainer = styled.div`\n\tpadding: 12px;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tborder-top: 1px solid ${COLORS.stroke.primary};\n`;\n\nexport const FooterWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: space-between;\n\tmargin: 8px 12px;\n`;\n\nexport const MediaNameAbsWrapper = styled.div`\n\tposition: absolute;\n\tbottom: -1px;\n\tleft: 0;\n\ttext-align: center;\n\twidth: 100%;\n\tpadding: 10px;\n\talign-items: center;\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: start;\n\tbackground: ${COLORS.surface.hovered};\n\tborder-bottom-right-radius: 8px;\n\tborder-bottom-left-radius: 8px;\n`;\n\nexport const DownloadMediaIconHolder = styled.div`\n\tposition: absolute;\n\ttop: 16px;\n\tright: 16px;\n`;\n"],"names":["Container","styled","COLORS","props","TimeStamp","Caption","FooterText","MediaContainer","ChatBtnContainer","FooterWrapper"],"mappings":"mQAIaA,EAAYC,EAAAA,QAAO;AAAA,eAQjBC,EAAAA,OAAO,QAAQ,QAAQ;AAAA,2BACVC,GAAWA,EAAM,eAAiB,OAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOxEA,GACFA,EAAM,SACH,GAAGD,EAAAA,OAAO,QAAQ,QAAQ,GAC1BC,EAAM,WACN,GAAGD,EAAAA,OAAO,OAAO,KAAK,GACtB,GAAGA,SAAO,OAAO,OAAO,EAAE;AAAA,WACpBC,GACVA,EAAM,kBAAoB,cAAcD,SAAO,QAAQ,KAAK,EAAE;AAAA,WACpDC,GAAWA,EAAM,mBAAqB,OAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK5DA,GACDA,EAAM,UAQJ,QAPAA,EAAM,mBACLA,EAAM,SACL,SACAA,EAAM,WACN,QACA,SACD,OACM;AAAA,KACTD,EAAAA,OAAO,OAAO,KAAK;AAAA,gBACPC,GACd,CAACA,EAAM,WAAa,kCAAkC;AAAA;AAAA,EAI5CC,EAAYH,EAAAA,QAAOI,SAAO;AAAA,UAC7BH,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQrBI,EAAaL,EAAAA,QAAOG,CAAS;AAAA;AAAA,EAI7BG,EAAiBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWxBO,EAAmBP,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAAA,OAAO,OAAO,OAAO;AAAA,EAGjCO,EAAgBR,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAODA,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKED,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}

package/dist/esm/components/WhatsAppTextEditor/AIRephraseButton.js CHANGED Viewed

@@ -29,7 +29,7 @@ const B = d.div`
 	display: flex;
 	align-items: center;
 	gap: 4px;
-	:hover {
+	&:hover {
 		filter: brightness(0.98);
 	}
 `, j = d.button`
@@ -80,7 +80,7 @@ const B = d.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-	:hover {
+	&:hover {
 		background: ${(e) => e.selected || e.toneSubmenuOpen ? "#d9e8db" : "#f7f7f8"};
 	}
 	${(e) => e.isChangeToneRow ? `

package/dist/esm/components/WhatsAppTextEditor/AIRephraseButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIRephraseButton.js","sources":["../../../../src/components/WhatsAppTextEditor/AIRephraseButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport ChevronDownIcon from '../../assets/icons/chevronDown.svg';\nimport ChevronRightIcon from '../../assets/icons/chevronRight.svg';\nimport EditIcon from '../../assets/icons/edit.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport SparkleIcon from '../../assets/icons/magic-line.svg';\nimport BorderAnimation from './BorderAnimation';\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid transparent;\n\tborder-radius: 16px;\n\tbackground: #ffe8ef;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 16px 0 0 16px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tfilter: brightness(0.98);\n\t}\n`;\n\nconst AIArrowButton = styled.button<{ disabled?: boolean }>`\n\tposition: relative;\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 0 16px 16px 0;\n\tpadding: 4px;\n\tline-height: 1;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\t/* 12px inset divider, matching Figma (Line 14) /\n\t::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\twidth: 1px;\n\t\theight: 12px;\n\t\tbackground: #f6c8d7;\n\t}\n`;\n\nconst AIDropdownContainer = styled.div`\n\tposition: relative;\n`;\n\nconst AIDropdownMenu = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 6px);\n\tleft: 0;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\twidth: 209px;\n\tz-index: 10;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\nconst AIDropdownItem = styled.button<{\n\tselected?: boolean;\n\tisInstructions?: boolean;\n\t/* Change tone row: green highlight when tone submenu is open /\n\ttoneSubmenuOpen?: boolean;\n\t/* Change tone row: green text/icon on hover or when submenu open */\n\tisChangeToneRow?: boolean;\n}>`\n\twidth: 100%;\n\ttext-align: left;\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.selected \|\| props.toneSubmenuOpen ? '#d9e8db' : 'transparent'};\n\tcolor: ${(props) =>\n\t\tprops.selected \|\| props.toneSubmenuOpen\n\t\t\t? '#1e6b34'\n\t\t\t: COLORS.content.primary};\n\tpadding: 10px 10px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected \|\| props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t}\n\t${(props) =>\n\t\tprops.isChangeToneRow\n\t\t\t? `\n\t\t&:hover {\n\t\t\tcolor: #1e6b34;\n\t\t\tbackground: ${props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nconst ToneSubMenu = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: calc(100% + 4px);\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tmin-width: 140px;\n\tz-index: 11;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\ntype AIRephraseButtonProps = {\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tinstructionActive?: boolean;\n\tonClick?: () => void;\n\tonToneChange?: (toneId: string) => void;\n\tonInstructionsClick?: () => void;\n\tshowSecondaryRephraseOption?: boolean;\n\tonSecondaryRephraseClick?: () => void;\n};\n\nexport const AIRephraseButton = ({\n\tlabel,\n\tdisabled,\n\tloading,\n\thighlighted,\n\ttones,\n\tselectedToneId,\n\tinstructionActive,\n\tonClick,\n\tonToneChange,\n\tonInstructionsClick,\n\tshowSecondaryRephraseOption,\n\tonSecondaryRephraseClick,\n}: AIRephraseButtonProps) => {\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [isToneMenuOpen, setIsToneMenuOpen] = useState(false);\n\tconst isDropdownDisabled = !!instructionActive \|\| !!disabled \|\| !!loading;\n\n\tuseOutside(dropdownRef, () => {\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t});\n\n\tuseEffect(() => {\n\t\tif (!instructionActive) return;\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t}, [instructionActive]);\n\n\treturn (\n\t\t<AIDropdownContainer ref={dropdownRef}>\n\t\t\t<BorderAnimation\n\t\t\t\tshowAnimation={!!highlighted}\n\t\t\t\tdisabled={!!disabled \|\| !!loading}\n\t\t\t\tborderRadius={16}\n\t\t\t\tborderSize={2}\n\t\t\t>\n\t\t\t\t<AIButtonGroup disabled={disabled \|\| loading}>\n\t\t\t\t\t<AIButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={disabled \|\| loading}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SparkleIcon width={16} height={16} color=\"#f53f77\" />\n\t\t\t\t\t\t{loading ? '...' : label}\n\t\t\t\t\t</AIButton>\n\t\t\t\t\t<AIArrowButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={isDropdownDisabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tsetIsDropdownOpen((prev) => !prev);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronDownIcon width={16} height={16} />\n\t\t\t\t\t</AIArrowButton>\n\t\t\t\t</AIButtonGroup>\n\t\t\t</BorderAnimation>\n\t\t\t{isDropdownOpen ? (\n\t\t\t\t<AIDropdownMenu>\n\t\t\t\t\t{tones?.length ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttoneSubmenuOpen={isToneMenuOpen}\n\t\t\t\t\t\t\tisChangeToneRow\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setIsToneMenuOpen((prev) => !prev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\twidth: '100%',\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\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tgap: 8,\n\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\t\t<EmojiIcon width={18} height={18} color=\"currentColor\" />\n\t\t\t\t\t\t\t\t\tChange tone\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={14} height={14} color=\"currentColor\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tisInstructions\n\t\t\t\t\t\tselected={!!instructionActive}\n\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tonInstructionsClick?.();\n\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.primary} />\n\t\t\t\t\t\tAdd instructions\n\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t{showSecondaryRephraseOption ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disabled \|\| loading) return;\n\t\t\t\t\t\t\t\tonSecondaryRephraseClick?.();\n\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SparkleIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\tRephrase\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{isToneMenuOpen && tones?.length ? (\n\t\t\t\t\t\t<ToneSubMenu>\n\t\t\t\t\t\t\t{tones.map((tone) => (\n\t\t\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\t\t\tkey={tone.id}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tselected={tone.id === selectedToneId}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\t\t\tonToneChange?.(tone.id);\n\t\t\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\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\t\t{tone.label}\n\t\t\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ToneSubMenu>\n\t\t\t\t\t) : null}\n\t\t\t\t</AIDropdownMenu>\n\t\t\t) : null}\n\t\t</AIDropdownContainer>\n\t);\n};\nexport type AIActionToneOption = {\n\tid: string;\n\tlabel: string;\n};\n"],"names":["AIButtonGroup","styled","props","AIButton","AIArrowButton","AIDropdownContainer","AIDropdownMenu","COLORS","AIDropdownItem","ToneSubMenu","AIRephraseButton","label","disabled","loading","highlighted","tones","selectedToneId","instructionActive","onClick","onToneChange","onInstructionsClick","showSecondaryRephraseOption","onSecondaryRephraseClick","dropdownRef","useRef","isDropdownOpen","setIsDropdownOpen","useState","isToneMenuOpen","setIsToneMenuOpen","isDropdownDisabled","useOutside","useEffect","jsxs","jsx","BorderAnimation","SparkleIcon","prev","ChevronDownIcon","EmojiIcon","ChevronRightIcon","EditIcon","tone"],"mappings":"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"}
1	+ {"version":3,"file":"AIRephraseButton.js","sources":["../../../../src/components/WhatsAppTextEditor/AIRephraseButton.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport ChevronDownIcon from '../../assets/icons/chevronDown.svg';\nimport ChevronRightIcon from '../../assets/icons/chevronRight.svg';\nimport EditIcon from '../../assets/icons/edit.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport SparkleIcon from '../../assets/icons/magic-line.svg';\nimport BorderAnimation from './BorderAnimation';\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid transparent;\n\tborder-radius: 16px;\n\tbackground: #ffe8ef;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ disabled?: boolean }>`\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 16px 0 0 16px;\n\tpadding: 4px 6px;\n\tfont-size: 12px;\n\tfont-weight: 400;\n\tline-height: 16px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t&:hover {\n\t\tfilter: brightness(0.98);\n\t}\n`;\n\nconst AIArrowButton = styled.button<{ disabled?: boolean }>`\n\tposition: relative;\n\tborder: 0;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 0 16px 16px 0;\n\tpadding: 4px;\n\tline-height: 1;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\n\t/* 12px inset divider, matching Figma (Line 14) /\n\t::before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 50%;\n\t\ttransform: translateY(-50%);\n\t\twidth: 1px;\n\t\theight: 12px;\n\t\tbackground: #f6c8d7;\n\t}\n`;\n\nconst AIDropdownContainer = styled.div`\n\tposition: relative;\n`;\n\nconst AIDropdownMenu = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 6px);\n\tleft: 0;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\twidth: 209px;\n\tz-index: 10;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\nconst AIDropdownItem = styled.button<{\n\tselected?: boolean;\n\tisInstructions?: boolean;\n\t/* Change tone row: green highlight when tone submenu is open /\n\ttoneSubmenuOpen?: boolean;\n\t/* Change tone row: green text/icon on hover or when submenu open */\n\tisChangeToneRow?: boolean;\n}>`\n\twidth: 100%;\n\ttext-align: left;\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.selected \|\| props.toneSubmenuOpen ? '#d9e8db' : 'transparent'};\n\tcolor: ${(props) =>\n\t\tprops.selected \|\| props.toneSubmenuOpen\n\t\t\t? '#1e6b34'\n\t\t\t: COLORS.content.primary};\n\tpadding: 10px 10px;\n\tborder-radius: 6px;\n\tcursor: pointer;\n\tfont-size: 14px;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\t&:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.selected \|\| props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t}\n\t${(props) =>\n\t\tprops.isChangeToneRow\n\t\t\t? `\n\t\t&:hover {\n\t\t\tcolor: #1e6b34;\n\t\t\tbackground: ${props.toneSubmenuOpen ? '#d9e8db' : '#f7f7f8'};\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nconst ToneSubMenu = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tleft: calc(100% + 4px);\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 8px;\n\tmin-width: 140px;\n\tz-index: 11;\n\tbox-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n\tpadding: 4px;\n`;\n\ntype AIRephraseButtonProps = {\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tinstructionActive?: boolean;\n\tonClick?: () => void;\n\tonToneChange?: (toneId: string) => void;\n\tonInstructionsClick?: () => void;\n\tshowSecondaryRephraseOption?: boolean;\n\tonSecondaryRephraseClick?: () => void;\n};\n\nexport const AIRephraseButton = ({\n\tlabel,\n\tdisabled,\n\tloading,\n\thighlighted,\n\ttones,\n\tselectedToneId,\n\tinstructionActive,\n\tonClick,\n\tonToneChange,\n\tonInstructionsClick,\n\tshowSecondaryRephraseOption,\n\tonSecondaryRephraseClick,\n}: AIRephraseButtonProps) => {\n\tconst dropdownRef = useRef<HTMLDivElement>(null);\n\tconst [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\tconst [isToneMenuOpen, setIsToneMenuOpen] = useState(false);\n\tconst isDropdownDisabled = !!instructionActive \|\| !!disabled \|\| !!loading;\n\n\tuseOutside(dropdownRef, () => {\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t});\n\n\tuseEffect(() => {\n\t\tif (!instructionActive) return;\n\t\tsetIsDropdownOpen(false);\n\t\tsetIsToneMenuOpen(false);\n\t}, [instructionActive]);\n\n\treturn (\n\t\t<AIDropdownContainer ref={dropdownRef}>\n\t\t\t<BorderAnimation\n\t\t\t\tshowAnimation={!!highlighted}\n\t\t\t\tdisabled={!!disabled \|\| !!loading}\n\t\t\t\tborderRadius={16}\n\t\t\t\tborderSize={2}\n\t\t\t>\n\t\t\t\t<AIButtonGroup disabled={disabled \|\| loading}>\n\t\t\t\t\t<AIButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={disabled \|\| loading}\n\t\t\t\t\t\tonClick={onClick}\n\t\t\t\t\t>\n\t\t\t\t\t\t<SparkleIcon width={16} height={16} color=\"#f53f77\" />\n\t\t\t\t\t\t{loading ? '...' : label}\n\t\t\t\t\t</AIButton>\n\t\t\t\t\t<AIArrowButton\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tdisabled={isDropdownDisabled}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tsetIsDropdownOpen((prev) => !prev);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronDownIcon width={16} height={16} />\n\t\t\t\t\t</AIArrowButton>\n\t\t\t\t</AIButtonGroup>\n\t\t\t</BorderAnimation>\n\t\t\t{isDropdownOpen ? (\n\t\t\t\t<AIDropdownMenu>\n\t\t\t\t\t{tones?.length ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\ttoneSubmenuOpen={isToneMenuOpen}\n\t\t\t\t\t\t\tisChangeToneRow\n\t\t\t\t\t\t\tonMouseEnter={() => {\n\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(true);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tonClick={() => setIsToneMenuOpen((prev) => !prev)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\t\t\t\twidth: '100%',\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\t<span\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tdisplay: 'inline-flex',\n\t\t\t\t\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\t\t\t\t\tgap: 8,\n\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\t\t<EmojiIcon width={18} height={18} color=\"currentColor\" />\n\t\t\t\t\t\t\t\t\tChange tone\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<ChevronRightIcon width={14} height={14} color=\"currentColor\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tisInstructions\n\t\t\t\t\t\tselected={!!instructionActive}\n\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\tonInstructionsClick?.();\n\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EditIcon width={16} height={16} color={COLORS.content.primary} />\n\t\t\t\t\t\tAdd instructions\n\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t{showSecondaryRephraseOption ? (\n\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tonMouseEnter={() => setIsToneMenuOpen(false)}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (disabled \|\| loading) return;\n\t\t\t\t\t\t\t\tonSecondaryRephraseClick?.();\n\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SparkleIcon\n\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\tRephrase\n\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{isToneMenuOpen && tones?.length ? (\n\t\t\t\t\t\t<ToneSubMenu>\n\t\t\t\t\t\t\t{tones.map((tone) => (\n\t\t\t\t\t\t\t\t<AIDropdownItem\n\t\t\t\t\t\t\t\t\tkey={tone.id}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tselected={tone.id === selectedToneId}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tif (isDropdownDisabled) return;\n\t\t\t\t\t\t\t\t\t\tonToneChange?.(tone.id);\n\t\t\t\t\t\t\t\t\t\tsetIsDropdownOpen(false);\n\t\t\t\t\t\t\t\t\t\tsetIsToneMenuOpen(false);\n\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\t\t{tone.label}\n\t\t\t\t\t\t\t\t</AIDropdownItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ToneSubMenu>\n\t\t\t\t\t) : null}\n\t\t\t\t</AIDropdownMenu>\n\t\t\t) : null}\n\t\t</AIDropdownContainer>\n\t);\n};\nexport type AIActionToneOption = {\n\tid: string;\n\tlabel: string;\n};\n"],"names":["AIButtonGroup","styled","props","AIButton","AIArrowButton","AIDropdownContainer","AIDropdownMenu","COLORS","AIDropdownItem","ToneSubMenu","AIRephraseButton","label","disabled","loading","highlighted","tones","selectedToneId","instructionActive","onClick","onToneChange","onInstructionsClick","showSecondaryRephraseOption","onSecondaryRephraseClick","dropdownRef","useRef","isDropdownOpen","setIsDropdownOpen","useState","isToneMenuOpen","setIsToneMenuOpen","isDropdownDisabled","useOutside","useEffect","jsxs","jsx","BorderAnimation","SparkleIcon","prev","ChevronDownIcon","EmojiIcon","ChevronRightIcon","EditIcon","tone"],"mappings":"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"}

package/dist/esm/components/WhatsAppTextEditor/WhatsAppTextEditor.js CHANGED Viewed

@@ -85,15 +85,15 @@ const Ht = "Character limit reached", fe = 3e3, mn = 5, pe = 3, me = 1200, bn =
 	cursor: pointer;
 	color: ${i.content.primary};
 	transition: background-color 0.12s ease;
-	:not(:disabled):hover {
+	&:not(:disabled):hover {
 		background-color: ${i.surface.hovered};
 	}
-	:disabled {
+	&:disabled {
 		opacity: 0.35;
 		cursor: not-allowed;
 	}
 `, Cn = a(O)`
-	:disabled {
+	&:disabled {
 		opacity: 1;
 		cursor: wait;
 	}
@@ -172,7 +172,7 @@ const Ht = "Character limit reached", fe = 3e3, mn = 5, pe = 3, me = 1200, bn =
 	font-size: 14px;
 	line-height: 1.2;
 	cursor: pointer;
-	:hover {
+	&:hover {
 		background: ${(g) => g.selected ? "#d9e8db" : i.surface.subdued};
 	}
 `, B = new qe(), Dn = {