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

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

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

package/dist/esm/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/esm/components/product-picker-v2/style.js CHANGED Viewed

@@ -30,7 +30,7 @@ const p = e.div`
 	column-gap: 16px;
 	justify-content: space-between;
 	align-items: center;
-	&:hover {
+	:hover {
 		cursor: pointer;
 		background-color: ${t.surface.hovered};
 	}
@@ -75,7 +75,7 @@ const p = e.div`
 	justify-content: flex-start;
 	align-items: center;
 	padding-left: ${(i) => i.isVariant ? "42px" : "16px"};
-	&:hover {
+	:hover {
 		cursor: pointer;
 		background-color: ${t.surface.hovered};
 	}

package/dist/esm/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":";;;;AAKO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA,WAG1B,CAACC,MAAWA,EAAM,qBAAqB,QAAQ,MAAO;AAAA;AAAA,GAIpDC,IAAuBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUrB,CAACC,MACpBA,EAAM,eAAeE,EAAW,oBAAoB,SAAS,MAAM;AAAA;AAAA;AAAA,GAKzDC,IAAsBJ,EAAO;AAAA;AAAA,qBAMrB,CAACC,MACpBA,EAAM,aACH,YACAA,EAAM,WACNI,EAAO,WAAW,SAAS,QAC3B,OAAO;AAAA;AAAA,YAEA,CAACJ,MAAWA,EAAM,eAAe,cAAc,WAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQjDI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BC,IAA0BN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCO,IAA4BP,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BI,IAAmCT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1CU,IAAmBV,EAAO;AAAA;AAAA,qBAKlB,CAACC,MACpBA,EAAM,WAAWI,EAAO,WAAW,SAAS,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ5C,CAACJ,MAAWA,EAAM,YAAY,SAAS,MAAO;AAAA;AAAA;AAAA,sBAGzCI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BM,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BO,IAAuBZ,EAAO;AAAA;AAAA;AAAA,GAK9Ba,IAAuBb,EAAO;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,GA8B9Bc,IAAuBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASNA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOvBK,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMU,IAA0Bf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjCgB,IAAahB,EAAO;AAAA;AAAA,eAElBK,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA,GAK9BY,IAAmBjB,EAAOkB,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrCb,EAAO,WAAW,YAAY;AAAA,GAG3Bc,IAAkBnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMzBoB,IAAcpB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQFA,EAAOqB,CAAU;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":";;;;AAKO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA,WAG1B,CAACC,MAAWA,EAAM,qBAAqB,QAAQ,MAAO;AAAA;AAAA,GAIpDC,IAAuBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUrB,CAACC,MACpBA,EAAM,eAAeE,EAAW,oBAAoB,SAAS,MAAM;AAAA;AAAA;AAAA,GAKzDC,IAAsBJ,EAAO;AAAA;AAAA,qBAMrB,CAACC,MACpBA,EAAM,aACH,YACAA,EAAM,WACNI,EAAO,WAAW,SAAS,QAC3B,OAAO;AAAA;AAAA,YAEA,CAACJ,MAAWA,EAAM,eAAe,cAAc,WAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAQjDI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BC,IAA0BN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQjCO,IAA4BP,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnCQ,IAAsBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKrBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU9BI,IAAmCT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1CU,IAAmBV,EAAO;AAAA;AAAA,qBAKlB,CAACC,MACpBA,EAAM,WAAWI,EAAO,WAAW,SAAS,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQ5C,CAACJ,MAAWA,EAAM,YAAY,SAAS,MAAO;AAAA;AAAA;AAAA,sBAGzCI,EAAO,QAAQ,OAAO;AAAA;AAAA,GAI/BM,IAAuBX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKtBK,EAAO,WAAW,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS9BO,IAAuBZ,EAAO;AAAA;AAAA;AAAA,GAK9Ba,IAAuBb,EAAO;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,GA8B9Bc,IAAuBd,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASNA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAOvBK,EAAO,OAAO,OAAO;AAAA;AAAA;AAInC,MAAMU,IAA0Bf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASjCgB,IAAahB,EAAO;AAAA;AAAA,eAElBK,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA,GAK9BY,IAAmBjB,EAAOkB,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrCb,EAAO,WAAW,YAAY;AAAA,GAG3Bc,IAAkBnB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMzBoB,IAAcpB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQFA,EAAOqB,CAAU;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -94,13 +94,13 @@ const R = c.div`
 	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/esm/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":";;;;AAKO,MAAMA,IAASC;AAAA,EACrB,CAAC;AAAA,IACA,kBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAOC;AAAA,IACP,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,WAAAC;AAAA,IACA,aAAaC;AAAA,EAAA,MACR;AACL,UAAM,EAAE,UAAAC,MAAaC,GAEf,CAACC,GAAOC,CAAQ,IAAIC,EAAkBX,CAAU,GAEhD,CAACY,GAAWC,CAAU,IAAIF,EAAkBN,KAAa,EAAK,GAC9DS,IAAeZ,KAAY;AAEjC,IAAAa,EAAU,MAAM;AACf,MAAI,OAAOV,KAAa,aACvBQ,EAAWR,CAAS;AAAA,IAEtB,GAAG,CAACA,CAAS,CAAC,GAEdU,EAAU,MAAM;AACf,MAAAL,EAASV,CAAU;AAAA,IACpB,GAAG,CAACA,CAAU,CAAC;AAEf,UAAMgB,IAA2CjB,IAC9C;AAAA,MACA,OAAOQ,EAAS,WAAW;AAAA,MAC3B,MAAMA,EAAS,WAAW;AAAA,IAAA,IAE1B;AAAA,MACA,OACCX,GAAY,SAASQ,MAAS,aAC3BG,EAAS,WAAW,SAAS,QAC7BA,EAAS,WAAW;AAAA,MACxB,MACCX,GAAY,QAAQQ,MAAS,aAC1BG,EAAS,WAAW,SAAS,UAC7BA,EAAS,WAAW;AAAA,IAAA,GAGrBU,IAA4C;AAAA,MACjD,OACCb,MAAS,aACNG,EAAS,OAAO,SAAS,WACzBA,EAAS,OAAO;AAAA,MACpB,MACCH,MAAS,aACNG,EAAS,WAAW,SAAS,UAC7BA,EAAS,WAAW;AAAA,IAAA,GAGnBW,IAA2CnB,IAC9C,EAAE,OAAOQ,EAAS,QAAQ,UAAU,MAAMA,EAAS,QAAQ,SAAA,IAC3D;AAAA,MACA,OACCZ,GAAkB,SAASS,MAAS,aACjCG,EAAS,QAAQ,WACjBA,EAAS,KAAK;AAAA,MAClB,MAAMZ,GAAkB,QAAQY,EAAS,QAAQ;AAAA,IAAA,GAG9CY,IAA6Cf,IAEhD;AAAA,MACA,OACCA,MAAS,aACNG,EAAS,OAAO,SAAS,WACzBA,EAAS,OAAO;AAAA,MACpB,MACCH,MAAS,aACNG,EAAS,OAAO,SAAS,WACzBA,EAAS,WAAW;AAAA,IAAA,IATxB,EAAE,OAAOA,EAAS,OAAO,SAAS,MAAMA,EAAS,OAAO,QAAA;AAY3D,mBAAea,IAAc;AAC5B,UAAI,CAAArB,GAGJ;AAAA,QAAI,OAAOM,KAAc,aACxBQ,EAAW,EAAI;AAEhB,YAAI;AACH,gBAAMZ,IAAgB,CAACQ,CAAK,GAC5BC,EAAS,CAACD,CAAK;AAAA,QAChB,SAASY,GAAK;AACb,kBAAQ,IAAIA,CAAG;AAAA,QAChB;AACA,QAAI,OAAOhB,KAAc,aACxBQ,EAAW,EAAK;AAAA;AAAA,IAElB;AAEA,WACC,gBAAAS,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,aAAWlB;AAAA,QACX,aAAaR,KAAe;AAAA,QAC5B,aAAaD,KAAe;AAAA,QAC5B,SAAS,MAAMuB,EAAA;AAAA,QACf,YAAYJ;AAAA,QACZ,OAAAP;AAAA,QACA,OAAON;AAAA,QACP,aAAac;AAAA,QACb,UAAUH;AAAA,QACV,UAAAf;AAAA,QACA,cAAcoB;AAAA,QAEb,cACA,gBAAAG,EAACG,GAAA,EAAO,OAAAhB,GAAc,YAAYO,GAAwB,IAE1D,gBAAAM;AAAA,UAACI;AAAA,UAAA;AAAA,YACA,OAAAjB;AAAA,YACA,UAAUK;AAAA,YACV,YAAYI;AAAA,UAAA;AAAA,QAAA;AAAA,MACb;AAAA,IAAA,GAGH;AAAA,EAEF;AACD;AAEAzB,EAAO,cAAc;AAEd,MAAM+B,IAAkBG,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAgBjB,CAACC,MACpBA,EAAM,QAAQA,EAAM,WAAW,OAAOA,EAAM,WAAW,KAAK;AAAA,UACpD,CAACA,MAAUA,EAAM,cAAc,IAAI;AAAA,WAClC,CAACA,MAAUA,EAAM,cAAc,IAAI;AAAA,iBAC7B,CAACA,MAAWA,EAAM,WAAW,QAAQ,KAAM;AAAA;AAAA,iBAE3C,CAACA,MAChBA,EAAM,QAAQA,EAAM,YAAY,OAAOA,EAAM,YAAY,KAAK;AAAA;AAAA,eAEjD,CAACA,MAAU,GAAGA,EAAM,WAAW,GAAI,YAAY;AAAA;AAAA,WAEnD,CAACA,MAAWA,EAAM,WAAW,YAAY,SAAU;AAAA;AAAA,aAEjD,CAACA,MACXA,EAAM,QAAQA,EAAM,aAAa,OAAOA,EAAM,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAMtD,CAACA,MACXA,EAAM,QAAQA,EAAM,aAAa,OAAOA,EAAM,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtDF,IAAQC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAUnB,CAACC,MAAWA,EAAM,QAAQ,sBAAsB,KAAM;AAAA,eAChD,CAACA,MAAU,GAAGA,EAAM,WAAW,GAAI,YAAY;AAAA,qBACzC,CAACA,MACpBA,EAAM,QAAQA,EAAM,WAAW,OAAOA,EAAM,WAAW,KAAK;AAAA,GAGjDH,IAASE,EAAO;AAAA;AAAA;AAAA,iBAMZ,CAACC,MAChBA,EAAM,QAAQA,EAAM,WAAW,OAAOA,EAAM,WAAW,KAAK;AAAA;AAAA;AAAA,qBAGzC,CAACA,MACpBA,EAAM,QAAQC,EAAO,KAAK,QAAQA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAMlD,CAACD,MAAWA,EAAM,QAAQ,sBAAsB,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

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

package/dist/esm/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":";;AAI4BA,EAAO;AAAA,qBAId,CAACC,MAAWA,EAAM,aAAa,YAAY,OAAQ;AAAA;AAAA;AAAA,WAG7D,CAACA,MAAWA,EAAM,aAAa,SAAS,MAAO;AAAA;AAGnD,MAAMC,IAAmBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBC,IAAsBJ,EAAOE,CAAgB;AAAA;AAAA;AAAA,GAK7CG,IAAqBL,EAAOE,CAAgB;AAAA;AAAA,GAG5CI,IAAsBN,EAAO;AAAA,eAU3BG,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKnB,CAACF,MAClBA,EAAM,0BAA0B,QAAQ,QAAQ;AAAA;AAAA,GAE/C,CAACA,MACGA,EAAM,aACPA,EAAM,mBACF,sBAAsBE,EAAO,QAAQ,KAAK,MAC9CF,EAAM,WAAiB,qBAAqBE,EAAO,QAAQ,QAAQ,MACnEF,EAAM,aAAmB,qBAAqBE,EAAO,OAAO,KAAK,MAC9D,qBAAqBA,EAAO,OAAO,OAAO,MALnB,eAM9B;AAAA;AAAA;AAAA,IAGE,CAACF,MACEA,EAAM,aAAa,CAACA,EAAM,aAAmB,KAU1C;AAAA,kBARaA,EAAM,qBACvBA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OAGuB,IAAIE,EAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAM9BI,IAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU7BQ,IAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOtB,CAACC,MAAWA,EAAM,eAAe,KAAK,KAAM;AAAA,UACpD,CAACA,MAAWA,EAAM,eAAe,QAAQ,MAAO;AAAA,GAE7CQ,IAAkBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBU,IAAgBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBW,IAAUX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBY,IAAuBZ,EAAO;AAAA,qBACtBG,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIxB,CAACF,MAAUA,EAAM,gBAAgB,KAAK;AAAA;AAAA;AAAA,GAM3CY,IAAkBb,EAAO;AAAA;AAAA,qBAEjBG,EAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWlCW,IAAgBd,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBe,IAAgBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBgB,IAAiBhB,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAWjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAO,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":";;AAI4BA,EAAO;AAAA,qBAId,CAACC,MAAWA,EAAM,aAAa,YAAY,OAAQ;AAAA;AAAA;AAAA,WAG7D,CAACA,MAAWA,EAAM,aAAa,SAAS,MAAO;AAAA;AAGnD,MAAMC,IAAmBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAO7BG,EAAO,QAAQ,OAAO;AAAA;AAAA,GAInBC,IAAsBJ,EAAOE,CAAgB;AAAA;AAAA;AAAA,GAK7CG,IAAqBL,EAAOE,CAAgB;AAAA;AAAA,GAG5CI,IAAsBN,EAAO;AAAA,eAU3BG,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,mBAKnB,CAACF,MAClBA,EAAM,0BAA0B,QAAQ,QAAQ;AAAA;AAAA,GAE/C,CAACA,MACGA,EAAM,aACPA,EAAM,mBACF,sBAAsBE,EAAO,QAAQ,KAAK,MAC9CF,EAAM,WAAiB,qBAAqBE,EAAO,QAAQ,QAAQ,MACnEF,EAAM,aAAmB,qBAAqBE,EAAO,OAAO,KAAK,MAC9D,qBAAqBA,EAAO,OAAO,OAAO,MALnB,eAM9B;AAAA;AAAA;AAAA,IAGE,CAACF,MACEA,EAAM,aAAa,CAACA,EAAM,aAAmB,KAU1C;AAAA,kBARaA,EAAM,qBACvBA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OAGuB,IAAIE,EAAO,OAAO,KAAK;AAAA;AAAA,IAGjD;AAAA;AAAA;AAAA;AAAA,sBAImBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,GAM9BI,IAAsBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAU7BQ,IAAoBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOtB,CAACC,MAAWA,EAAM,eAAe,KAAK,KAAM;AAAA,UACpD,CAACA,MAAWA,EAAM,eAAe,QAAQ,MAAO;AAAA,GAE7CQ,IAAkBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWzBU,IAAgBV,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvBW,IAAUX,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAajBY,IAAuBZ,EAAO;AAAA,qBACtBG,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA,kBAIxB,CAACF,MAAUA,EAAM,gBAAgB,KAAK;AAAA;AAAA;AAAA,GAM3CY,IAAkBb,EAAO;AAAA;AAAA,qBAEjBG,EAAO,WAAW,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWlCW,IAAgBd,EAAO;AAAA;AAAA;AAAA;AAAA,GAMvBe,IAAgBf,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBgB,IAAiBhB,EAAO;AAAA;AAAA;AAAA;AAAA,GAMxBiB,IAAWjB,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAMrBG,EAAO,QAAQ,SAAS;AAAA;AAAA;"}

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

@@ -15,7 +15,7 @@ const s = r.div`
 	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.stroke.brand};

package/dist/esm/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":";;;AAIO,MAAMA,IAAYC,EAAO;AAAA,eAQjBC,EAAO,QAAQ,QAAQ;AAAA,2BACX,CAACC,MAAWA,EAAM,iBAAiB,SAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzE,CAACA,MACFA,EAAM,WACH,GAAGD,EAAO,QAAQ,QAAQ,KAC1BC,EAAM,aACN,GAAGD,EAAO,OAAO,KAAK,KACtB,GAAGA,EAAO,OAAO,OAAO,EAAE;AAAA,WACrB,CAACC,MACVA,EAAM,oBAAoB,cAAcD,EAAO,QAAQ,KAAK,EAAE;AAAA,WACrD,CAACC,MAAWA,EAAM,qBAAqB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK7D,CAACA,MACDA,EAAM,YAQJ,UAPAA,EAAM,qBACLA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OACM;AAAA,KACTD,EAAO,OAAO,KAAK;AAAA,gBACR,CAACC,MACd,CAACA,EAAM,aAAa,kCAAkC;AAAA;AAAA,GAI5CC,IAAYH,EAAOI,CAAO;AAAA,UAC7BH,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBI,IAAaL,EAAOG,CAAS;AAAA;AAAA,GAI7BG,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWxBO,IAAmBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAO,OAAO,OAAO;AAAA,GAGjCO,IAAgBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAODA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKED,EAAO;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":";;;AAIO,MAAMA,IAAYC,EAAO;AAAA,eAQjBC,EAAO,QAAQ,QAAQ;AAAA,2BACX,CAACC,MAAWA,EAAM,iBAAiB,SAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOzE,CAACA,MACFA,EAAM,WACH,GAAGD,EAAO,QAAQ,QAAQ,KAC1BC,EAAM,aACN,GAAGD,EAAO,OAAO,KAAK,KACtB,GAAGA,EAAO,OAAO,OAAO,EAAE;AAAA,WACrB,CAACC,MACVA,EAAM,oBAAoB,cAAcD,EAAO,QAAQ,KAAK,EAAE;AAAA,WACrD,CAACC,MAAWA,EAAM,qBAAqB,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA,KAK7D,CAACA,MACDA,EAAM,YAQJ,UAPAA,EAAM,qBACLA,EAAM,WACL,WACAA,EAAM,aACN,UACA,WACD,OACM;AAAA,KACTD,EAAO,OAAO,KAAK;AAAA,gBACR,CAACC,MACd,CAACA,EAAM,aAAa,kCAAkC;AAAA;AAAA,GAI5CC,IAAYH,EAAOI,CAAO;AAAA,UAC7BH,EAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQrBI,IAAaL,EAAOG,CAAS;AAAA;AAAA,GAI7BG,IAAiBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWxBO,IAAmBP,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAMdC,EAAO,OAAO,OAAO;AAAA,GAGjCO,IAAgBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAODA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAW3BC,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAKED,EAAO;AAAA;AAAA;AAAA;AAAA;"}

package/package.json CHANGED Viewed

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