npm - @bikdotai/bik-component-library - Versions diffs - 0.0.825-6 → 0.0.825-beta.1 - Mend

@bikdotai/bik-component-library 0.0.825-6 → 0.0.825-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 (343) hide show

package/dist/cjs/components/TypographyStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TypographyStyle.js","sources":["../../../src/components/TypographyStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS, FONTS } from '@src/constants/Theme';\n\nconst addPixels = (value?: number) => {\n\tif (value === undefined \|\| value == null) return '';\n\treturn value + 'px';\n};\nexport interface customStyles {\n\tfontWeight?: number;\n\tfontSize?: number;\n\twidth?: number;\n}\n\nexport const TitleXlarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleXLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleXLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleXLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleMedium = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleMedium.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleMedium.fontSize)};\n\tline-height: ${addPixels(FONTS.titleMedium.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SmallRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.titleRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const TitleSmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleSmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleSmall.fontSize)};\n\tline-height: ${addPixels(FONTS.titleSmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleTiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleTiny.fontSize)};\n\tline-height: ${addPixels(FONTS.titleTiny.lineHeight)};\n\tfont-variant-numeric: lining-nums tabular-nums;\n\tfont-feature-settings: 'case' on;\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Display = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.display.fontWeight};\n\tfont-size: ${addPixels(FONTS.display.fontSize)};\n\tline-height: ${addPixels(FONTS.display.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodyPrimary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyPrimary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyPrimary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodySecondary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tcustomStyles?: customStyles;\n}>`\n\tfont-family: Inter;\n\twidth: ${(props) => addPixels(props.customStyles?.width)};\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${(props) =>\n\t\tprops.customStyles?.fontWeight \|\| FONTS.bodySecondary.fontWeight};\n\tfont-size: ${(props) =>\n\t\taddPixels(props.customStyles?.fontSize) \|\|\n\t\taddPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonRegularAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tdisabled?: boolean;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySecondary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyPrimaryLink = styled(BodyPrimary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodySecondaryLink = styled(BodySecondary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tword-break: break-word;\n\toverflow-wrap: break-word;\n`;\n\nexport const AiBodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyTinySemiBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyTinySemiBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyTinySemiBold.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyTinySemiBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const AiBodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonLargeAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\tz-index: 1;\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SubHeading = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.subHeading.fontWeight};\n\tfont-size: ${addPixels(FONTS.subHeading.fontSize)};\n\tline-height: ${addPixels(FONTS.subHeading.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Caption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TextPlaceholder = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.textPlaceholder.fontWeight};\n\tfont-size: ${addPixels(FONTS.textPlaceholder.fontSize)};\n\tline-height: ${addPixels(FONTS.textPlaceholder.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleFour = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodySmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySmall.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const CaptionBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.captionBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.captionBold.fontSize)};\n\tline-height: ${addPixels(FONTS.captionBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Tiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n"],"names":["addPixels","value","TitleXlarge","styled","props","COLORS","FONTS","TitleLarge","TitleMedium","SmallRegular","TitleRegular","TitleSmall","TitleTiny","Display","BodyLarge","BodyPrimary","BodySecondary","ButtonRegularAI","BodyPrimaryLink","BodySecondaryLink","BodyCaption","AiBodyCaption","BodyTiny","BodyTinySemiBold","AiBodyTiny","ButtonLarge","ButtonLargeAI","ButtonRegular","SubHeading","BodyRegular","Caption","TextPlaceholder","TitleFour","BodySmall","CaptionBold","Tiny"],"mappings":"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"}
1	+ {"version":3,"file":"TypographyStyle.js","sources":["../../../src/components/TypographyStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS, FONTS } from '@src/constants/Theme';\n\nconst addPixels = (value?: number) => {\n\tif (value === undefined \|\| value == null) return '';\n\treturn value + 'px';\n};\nexport interface customStyles {\n\tfontWeight?: number;\n\tfontSize?: number;\n\twidth?: number;\n}\n\nexport const TitleXlarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleXLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleXLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleXLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.titleLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleMedium = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleMedium.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleMedium.fontSize)};\n\tline-height: ${addPixels(FONTS.titleMedium.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SmallRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.titleRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const TitleSmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.titleSmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.titleSmall.fontSize)};\n\tline-height: ${addPixels(FONTS.titleSmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Display = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.display.fontWeight};\n\tfont-size: ${addPixels(FONTS.display.fontSize)};\n\tline-height: ${addPixels(FONTS.display.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodyPrimary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyPrimary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyPrimary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyPrimary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\nexport const BodySecondary = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tcustomStyles?: customStyles;\n}>`\n\tfont-family: Inter;\n\twidth: ${(props) => addPixels(props.customStyles?.width)};\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${(props) =>\n\t\tprops.customStyles?.fontWeight \|\| FONTS.bodySecondary.fontWeight};\n\tfont-size: ${(props) =>\n\t\taddPixels(props.customStyles?.fontSize) \|\|\n\t\taddPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonRegularAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n\tdisabled?: boolean;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySecondary.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySecondary.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySecondary.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyPrimaryLink = styled(BodyPrimary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodySecondaryLink = styled(BodySecondary)`\n\ttext-decoration: underline;\n\tcolor: ${COLORS.content.brand};\n\ttext-decoration-color: ${COLORS.content.brand};\n\tcursor: pointer;\n`;\n\nexport const BodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tword-break: break-word;\n\toverflow-wrap: break-word;\n`;\n\nexport const AiBodyCaption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const BodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const AiBodyTiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tz-index: 1;\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonLarge = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const ButtonLargeAI = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonLarge.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonLarge.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonLarge.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n\tbackground: linear-gradient(93deg, #ff166a 0.37%, #fb5f08 100%);\n\tz-index: 1;\n\t-webkit-background-clip: text;\n\t-webkit-text-fill-color: transparent;\n\tbackground-clip: text;\n\ttext-fill-color: transparent;\n`;\n\nexport const ButtonRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.buttonRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.buttonRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.buttonRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const SubHeading = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.subHeading.fontWeight};\n\tfont-size: ${addPixels(FONTS.subHeading.fontSize)};\n\tline-height: ${addPixels(FONTS.subHeading.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodyRegular = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${(props) => props.color \|\| COLORS.text.primary};\n\tfont-weight: ${FONTS.bodyRegular.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodyRegular.fontSize)};\n\tline-height: ${addPixels(FONTS.bodyRegular.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Caption = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.caption.fontWeight};\n\tfont-size: ${addPixels(FONTS.caption.fontSize)};\n\tline-height: ${addPixels(FONTS.caption.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TextPlaceholder = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.textPlaceholder.fontWeight};\n\tfont-size: ${addPixels(FONTS.textPlaceholder.fontSize)};\n\tline-height: ${addPixels(FONTS.textPlaceholder.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const TitleFour = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.title4.fontWeight};\n\tfont-size: ${addPixels(FONTS.title4.fontSize)};\n\tline-height: ${addPixels(FONTS.title4.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const BodySmall = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.bodySmall.fontWeight};\n\tfont-size: ${addPixels(FONTS.bodySmall.fontSize)};\n\tline-height: ${addPixels(FONTS.bodySmall.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const CaptionBold = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.captionBold.fontWeight};\n\tfont-size: ${addPixels(FONTS.captionBold.fontSize)};\n\tline-height: ${addPixels(FONTS.captionBold.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n\nexport const Tiny = styled.div<{\n\tnumberOfLines?: number;\n\tcolor?: string;\n}>`\n\tfont-family: Inter;\n\tcolor: ${COLORS.text.primary};\n\tfont-weight: ${FONTS.tiny.fontWeight};\n\tfont-size: ${addPixels(FONTS.tiny.fontSize)};\n\tline-height: ${addPixels(FONTS.tiny.lineHeight)};\n\t-webkit-box-orient: vertical;\n\toverflow: hidden;\n\tdisplay: -webkit-box;\n\t-webkit-line-clamp: ${(props) => props.numberOfLines};\n`;\n"],"names":["addPixels","value","TitleXlarge","styled","props","COLORS","FONTS","TitleLarge","TitleMedium","SmallRegular","TitleRegular","TitleSmall","Display","BodyLarge","BodyPrimary","BodySecondary","ButtonRegularAI","BodyPrimaryLink","BodySecondaryLink","BodyCaption","AiBodyCaption","BodyTiny","AiBodyTiny","ButtonLarge","ButtonLargeAI","ButtonRegular","SubHeading","BodyRegular","Caption","TextPlaceholder","TitleFour","BodySmall","CaptionBold","Tiny"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),S=require("styled-components"),k=require("../../hooks/useOutside.js"),o=require("../../constants/Theme.js"),I=require("../../assets/icons/chevronDown.svg.js"),$=require("../../assets/icons/chevronRight.svg.js"),q=require("../../assets/icons/edit.svg.js"),v=require("../../assets/icons/emoji.svg.js"),b=require("../../assets/icons/magic-line.svg.js"),A=require("./BorderAnimation.js"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=D(S),L=s.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),S=require("styled-components"),k=require("../../hooks/useOutside.js"),o=require("../../constants/Theme.js"),I=require("../../assets/icons/chevronDown.svg.js"),$=require("../../assets/icons/chevronRight.svg.js"),q=require("../../assets/icons/edit.svg.js"),v=require("../../assets/icons/emoji.svg.js"),h=require("../../assets/icons/magic-line.svg.js"),A=require("./BorderAnimation.js"),D=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=D(S),L=s.default.div`
 	display: flex;
 	align-items: center;
 	border: 1px solid transparent;
@@ -10,7 +10,7 @@
 	background: #ffe8ef;
 	color: #f53f77;
 	border-radius: 16px 0 0 16px;
-	padding: 4px 6px;
+	padding: 6px 10px;
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -22,27 +22,16 @@
 		filter: brightness(0.98);
 	}
 `,T=s.default.button`
-	position: relative;
 	border: 0;
+	border-left: 1px solid #f6c8d7;
 	background: #ffe8ef;
 	color: #f53f77;
 	border-radius: 0 16px 16px 0;
-	padding: 4px;
+	//padding: 4px 6px;
 	line-height: 1;
 	cursor: ${e=>e.disabled?"not-allowed":"pointer"};
 	display: flex;
 	align-items: center;
-	/* 12px inset divider, matching Figma (Line 14) */
-	::before {
-		content: '';
-		position: absolute;
-		left: 0;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 1px;
-		height: 12px;
-		background: #f6c8d7;
-	}
 `,B=s.default.div`
 	position: relative;
 `,z=s.default.div`
@@ -89,5 +78,5 @@
 	z-index: 11;
 	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 	padding: 4px;
-`,_=({label:e,disabled:l,loading:i,highlighted:g,tones:f,selectedToneId:m,instructionActive:u,onClick:w,onToneChange:y,onInstructionsClick:O,showSecondaryRephraseOption:j,onSecondaryRephraseClick:C})=>{const x=c.useRef(null),[R,d]=c.useState(!1),[h,n]=c.useState(!1),a=!!u||!!l||!!i;return k.useOutside(x,()=>{d(!1),n(!1)}),c.useEffect(()=>{u&&(d(!1),n(!1))},[u]),t.jsxs(B,{ref:x,children:[t.jsx(A.default,{showAnimation:!!g,disabled:!!l||!!i,borderRadius:16,borderSize:2,children:t.jsxs(L,{disabled:l||i,children:[t.jsxs(M,{type:"button",disabled:l||i,onClick:w,children:[t.jsx(b.default,{width:16,height:16,color:"#f53f77"}),i?"...":e]}),t.jsx(T,{type:"button",disabled:a,onClick:()=>{a||(d(r=>!r),n(!1))},children:t.jsx(I.default,{width:16,height:16})})]})}),R?t.jsxs(z,{children:[f?.length?t.jsx(p,{type:"button",toneSubmenuOpen:h,isChangeToneRow:!0,onMouseEnter:()=>{a||n(!0)},onClick:()=>n(r=>!r),children:t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[t.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:8},children:[t.jsx(v.default,{width:18,height:18,color:"currentColor"}),"Change tone"]}),t.jsx($.default,{width:14,height:14,color:"currentColor"})]})}):null,t.jsxs(p,{type:"button",isInstructions:!0,selected:!!u,onMouseEnter:()=>n(!1),onClick:()=>{a||(O?.(),d(!1),n(!1))},children:[t.jsx(q.default,{width:16,height:16,color:o.COLORS.content.primary}),"Add instructions"]}),j?t.jsxs(p,{type:"button",onMouseEnter:()=>n(!1),onClick:()=>{l||i||(C?.(),d(!1),n(!1))},children:[t.jsx(b.default,{width:16,height:16,color:o.COLORS.content.primary}),"Rephrase"]}):null,h&&f?.length?t.jsx(E,{children:f.map(r=>t.jsx(p,{type:"button",selected:r.id===m,onClick:()=>{a||(y?.(r.id),d(!1),n(!1))},children:r.label},r.id))}):null]}):null]})};exports.AIRephraseButton=_;
+`,_=({label:e,disabled:l,loading:i,highlighted:g,tones:f,selectedToneId:w,instructionActive:u,onClick:m,onToneChange:y,onInstructionsClick:O,showSecondaryRephraseOption:j,onSecondaryRephraseClick:C})=>{const x=c.useRef(null),[R,d]=c.useState(!1),[b,n]=c.useState(!1),a=!!u||!!l||!!i;return k.useOutside(x,()=>{d(!1),n(!1)}),c.useEffect(()=>{u&&(d(!1),n(!1))},[u]),t.jsxs(B,{ref:x,children:[t.jsx(A.default,{showAnimation:!!g,disabled:!!l||!!i,borderRadius:16,borderSize:2,children:t.jsxs(L,{disabled:l||i,children:[t.jsxs(M,{type:"button",disabled:l||i,onClick:m,children:[t.jsx(h.default,{width:12,height:12,color:"#f53f77"}),i?"...":e]}),t.jsx(T,{type:"button",disabled:a,onClick:()=>{a||(d(r=>!r),n(!1))},children:t.jsx(I.default,{width:14,height:14})})]})}),R?t.jsxs(z,{children:[f?.length?t.jsx(p,{type:"button",toneSubmenuOpen:b,isChangeToneRow:!0,onMouseEnter:()=>{a||n(!0)},onClick:()=>n(r=>!r),children:t.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%"},children:[t.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:8},children:[t.jsx(v.default,{width:18,height:18,color:"currentColor"}),"Change tone"]}),t.jsx($.default,{width:14,height:14,color:"currentColor"})]})}):null,t.jsxs(p,{type:"button",isInstructions:!0,selected:!!u,onMouseEnter:()=>n(!1),onClick:()=>{a||(O?.(),d(!1),n(!1))},children:[t.jsx(q.default,{width:16,height:16,color:o.COLORS.content.primary}),"Add instructions"]}),j?t.jsxs(p,{type:"button",onMouseEnter:()=>n(!1),onClick:()=>{l||i||(C?.(),d(!1),n(!1))},children:[t.jsx(h.default,{width:16,height:16,color:o.COLORS.content.primary}),"Rephrase"]}):null,b&&f?.length?t.jsx(E,{children:f.map(r=>t.jsx(p,{type:"button",selected:r.id===w,onClick:()=>{a||(y?.(r.id),d(!1),n(!1))},children:r.label},r.id))}):null]}):null]})};exports.AIRephraseButton=_;
 //# sourceMappingURL=AIRephraseButton.js.map

package/dist/cjs/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: 6px 10px;\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\tborder: 0;\n\tborder-left: 1px solid #f6c8d7;\n\tbackground: #ffe8ef;\n\tcolor: #f53f77;\n\tborder-radius: 0 16px 16px 0;\n\t//padding: 4px 6px;\n\tline-height: 1;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tdisplay: flex;\n\talign-items: center;\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={12} height={12} 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={14} height={14} />\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/cjs/components/agent-builder/components/MentionPicker.js CHANGED Viewed

@@ -2,7 +2,7 @@
 	display: flex;
 	flex-direction: column;
 	min-width: 240px;
-	max-height: 280px;
+	max-height: 301px;
 	overflow-y: auto;
 	background: ${r.COLORS.surface.standard};
 	border: 1px solid ${r.COLORS.stroke.primary};

package/dist/cjs/components/agent-builder/components/MentionPicker.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\n\ntype Category = 'tool' \| 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta \| undefined =>\n\titem.meta as unknown as MentionKindMeta \| undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. /\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/* Drill-in rows show a chevron; leaf (selectable) rows do not. /\n\tdrillsIn: boolean;\n\t/* Leading brand glyph (source rows only). /\n\ticon?: SourceIcon;\n\t/* Brand-coloured \"Create new\" action row (not a selectable item). /\n\tisCreate?: boolean;\n\tonActivate: () => void;\n};\n\n/* Sentinel id for the sub-agent \"Create new\" row. /\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/* Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). /\n\tonCreateSubAgent?: () => void;\n\t/\n\t Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. /\n\tinitialSource?: string;\n};\n\n/\n `@` reference picker. Drills:\n * root → Tools → <source> (Manifest / Shopify / …) → tool\n * → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n \n Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n\tinitialSource,\n}) => {\n\tconst [category, setCategory] = useState<Category \| null>(null);\n\tconst [source, setSource] = useState<string \| null>(initialSource ?? null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0\n\t\t\t\t\t: subAgents.length > 0 \|\| !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title with no chevron. In a source detail view the leading glyph is the\n\t// source icon (per design), otherwise it's a back chevron.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack?: () => void;\n\t\ticon?: SourceIcon;\n\t} \| null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? // Always titled — with a back chevron only when the category chooser is above.\n\t\t {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: SOURCE_ICONS[source],\n\t\t }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq \|\| rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\ticon: SOURCE_ICONS[s],\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q \|\| rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h?.onBack) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' && !!source) \|\| activeCategory === 'subagent';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.icon ? (\n\t\t\t\t\t\trenderSourceIcon(header.icon)\n\t\t\t\t\t) : header.onBack ? (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\trows[activeIndex]?.onActivate();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{renderSourceIcon(row.icon)}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 280px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","SOURCE_ICONS","rows","sq","leaves","q","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","renderSourceIcon","jsx","SvgArrowLeft","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","e","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","ChevronRight","styled"],"mappings":"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"}
1	+ {"version":3,"file":"MentionPicker.js","sources":["../../../../../src/components/agent-builder/components/MentionPicker.tsx"],"sourcesContent":["// import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport SearchIcon from '@src/assets/icons/searchIcon.svg';\nimport type { MentionDropdownRenderProps, MentionItem } from '@src/editor';\nimport SvgArrowLeft from '@src/icons/Arrows/Normal arrows/ArrowLeft';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { BodySecondary, TitleSmall } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport {\n\tMentionKindMeta,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport {\n\trenderSourceIcon,\n\tSOURCE_ICONS,\n\tSourceIcon,\n} from '../utils/sourceIcons';\n\ntype Category = 'tool' \| 'subagent';\n\nconst CATEGORIES: { key: Category; label: string }[] = [\n\t{ key: 'tool', label: 'Tools' },\n\t{ key: 'subagent', label: 'Sub-agent' },\n];\n\nconst metaOf = (item: MentionItem): MentionKindMeta \| undefined =>\n\titem.meta as unknown as MentionKindMeta \| undefined;\n\nconst rowLabel = (item: MentionItem): string =>\n\tmetaOf(item)?.plainLabel ?? item.label;\n\n/** One navigable row in the picker's current view. /\ntype PickerRowModel = {\n\tid: string;\n\tlabel: string;\n\t/* Drill-in rows show a chevron; leaf (selectable) rows do not. /\n\tdrillsIn: boolean;\n\t/* Leading brand glyph (source rows only). /\n\ticon?: SourceIcon;\n\t/* Brand-coloured \"Create new\" action row (not a selectable item). /\n\tisCreate?: boolean;\n\tonActivate: () => void;\n};\n\n/* Sentinel id for the sub-agent \"Create new\" row. /\nconst CREATE_SUBAGENT_ID = '__bik_create_subagent__';\n\ntype MentionPickerProps = MentionDropdownRenderProps & {\n\t/* Opens the create-sub-agent drawer (shows a \"Create new\" row in the Sub-agent view). /\n\tonCreateSubAgent?: () => void;\n\t/\n\t Open already drilled into this tool source (e.g. `'shopify'`) — its tool list\n\t * is shown immediately. /\n\tinitialSource?: string;\n};\n\n/\n `@` reference picker. Drills:\n * root → Tools → <source> (Manifest / Shopify / …) → tool\n * → Sub-agent → sub-agent\n * (\"Add condition\" and \"Variables\" are intentionally not shown yet.)\n \n Owns keyboard navigation (↑/↓ move, →/Enter activate, ← go back) over the\n * CURRENTLY visible rows — registered with the editor via `registerKeyHandler`.\n */\nexport const MentionPicker: React.FC<MentionPickerProps> = ({\n\titems,\n\tonSelect,\n\tregisterKeyHandler,\n\tonClose,\n\tonCreateSubAgent,\n\tinitialSource,\n}) => {\n\tconst [category, setCategory] = useState<Category \| null>(null);\n\tconst [source, setSource] = useState<string \| null>(initialSource ?? null);\n\tconst [activeIndex, setActiveIndex] = useState(0);\n\t// Search box shown inside a source's tool list (Manifest / Shopify); filters\n\t// that source's tools by name.\n\tconst [search, setSearch] = useState('');\n\n\tconst tools = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'tool'),\n\t\t[items],\n\t);\n\tconst subAgents = useMemo(\n\t\t() => items.filter((i) => metaOf(i)?.kind === 'subagent'),\n\t\t[items],\n\t);\n\tconst sources = useMemo(() => {\n\t\tconst acc: string[] = [];\n\t\ttools.forEach((t) => {\n\t\t\tconst s = metaOf(t)?.source ?? 'other';\n\t\t\tif (!acc.includes(s)) {\n\t\t\t\tacc.push(s);\n\t\t\t}\n\t\t});\n\t\treturn acc;\n\t}, [tools]);\n\n\t// Show a category when it has items — and ALWAYS show Sub-agent when creating\n\t// one is possible, so an agent with no sub-agents yet still gets the root\n\t// \"Tools / Sub-agent\" choice (with a \"Create new\" inside). When only one is\n\t// available (e.g. the sub-agent drawer offers tools only) the selector is skipped.\n\tconst availableCategories = useMemo(\n\t\t() =>\n\t\t\tCATEGORIES.filter((c) =>\n\t\t\t\tc.key === 'tool'\n\t\t\t\t\t? tools.length > 0\n\t\t\t\t\t: subAgents.length > 0 \|\| !!onCreateSubAgent,\n\t\t\t),\n\t\t[tools.length, subAgents.length, onCreateSubAgent],\n\t);\n\tconst soleCategory =\n\t\tavailableCategories.length === 1 ? availableCategories[0].key : null;\n\tconst activeCategory = category ?? soleCategory;\n\n\t// Title shown above the current view. `onBack` is omitted at a root level (a\n\t// sole category has nowhere to go back to) — the header then shows as a plain\n\t// title with no chevron. In a source detail view the leading glyph is the\n\t// source icon (per design), otherwise it's a back chevron.\n\tconst header: {\n\t\ttitle: string;\n\t\tonBack?: () => void;\n\t\ticon?: SourceIcon;\n\t} \| null = !activeCategory\n\t\t? null\n\t\t: activeCategory === 'subagent'\n\t\t? // Always titled — with a back chevron only when the category chooser is above.\n\t\t {\n\t\t\t\ttitle: 'Sub-agent',\n\t\t\t\tonBack: soleCategory ? undefined : () => setCategory(null),\n\t\t }\n\t\t: source\n\t\t? {\n\t\t\t\ttitle: toolSourceLabel(source),\n\t\t\t\tonBack: () => setSource(null),\n\t\t\t\ticon: SOURCE_ICONS[source],\n\t\t }\n\t\t: soleCategory\n\t\t? null\n\t\t: { title: 'Tools', onBack: () => setCategory(null) };\n\n\t// Build the navigable rows for the current view.\n\tconst rows: PickerRowModel[] = useMemo(() => {\n\t\tif (!activeCategory) {\n\t\t\treturn availableCategories.map((c) => ({\n\t\t\t\tid: c.key,\n\t\t\t\tlabel: c.label,\n\t\t\t\tdrillsIn: true,\n\t\t\t\tonActivate: () => {\n\t\t\t\t\tsetCategory(c.key);\n\t\t\t\t\tsetSource(null);\n\t\t\t\t},\n\t\t\t}));\n\t\t}\n\t\tif (activeCategory === 'subagent') {\n\t\t\tconst sq = search.trim().toLowerCase();\n\t\t\tconst leaves: PickerRowModel[] = subAgents\n\t\t\t\t.filter((item) => !sq \|\| rowLabel(item).toLowerCase().includes(sq))\n\t\t\t\t.map((item) => ({\n\t\t\t\t\tid: String(item.id),\n\t\t\t\t\tlabel: rowLabel(item),\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t\t}));\n\t\t\t// \"Create new\" opens the drawer — first dismiss the menu (strips the \"@\").\n\t\t\tif (onCreateSubAgent) {\n\t\t\t\tleaves.push({\n\t\t\t\t\tid: CREATE_SUBAGENT_ID,\n\t\t\t\t\tlabel: 'Create new',\n\t\t\t\t\tdrillsIn: false,\n\t\t\t\t\tisCreate: true,\n\t\t\t\t\tonActivate: () => {\n\t\t\t\t\t\tonClose?.();\n\t\t\t\t\t\tonCreateSubAgent();\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t}\n\t\t\treturn leaves;\n\t\t}\n\t\tif (!source) {\n\t\t\treturn sources.map((s) => ({\n\t\t\t\tid: s,\n\t\t\t\tlabel: toolSourceLabel(s),\n\t\t\t\tdrillsIn: true,\n\t\t\t\ticon: SOURCE_ICONS[s],\n\t\t\t\tonActivate: () => setSource(s),\n\t\t\t}));\n\t\t}\n\t\tconst q = search.trim().toLowerCase();\n\t\treturn tools\n\t\t\t.filter((t) => (metaOf(t)?.source ?? 'other') === source)\n\t\t\t.filter((t) => !q \|\| rowLabel(t).toLowerCase().includes(q))\n\t\t\t.map((item) => ({\n\t\t\t\tid: String(item.id),\n\t\t\t\tlabel: rowLabel(item),\n\t\t\t\tdrillsIn: false,\n\t\t\t\tonActivate: () => onSelect(item),\n\t\t\t}));\n\t}, [\n\t\tactiveCategory,\n\t\tavailableCategories,\n\t\tsource,\n\t\tsearch,\n\t\ttools,\n\t\tsubAgents,\n\t\tsources,\n\t\tonSelect,\n\t\tonClose,\n\t\tonCreateSubAgent,\n\t]);\n\n\t// Reset highlight whenever the view (or filtered result set) changes.\n\tuseEffect(() => setActiveIndex(0), [activeCategory, source, search, items]);\n\t// Clear the search box when leaving a source view.\n\tuseEffect(() => setSearch(''), [activeCategory, source]);\n\n\t// Keep the latest rows/index reachable from the stable key handler.\n\tconst navRef = useRef({ rows, activeIndex, header });\n\tnavRef.current = { rows, activeIndex, header };\n\n\tuseEffect(() => {\n\t\tif (!registerKeyHandler) {\n\t\t\treturn;\n\t\t}\n\t\tregisterKeyHandler((event) => {\n\t\t\tconst { rows: r, activeIndex: i, header: h } = navRef.current;\n\t\t\tswitch (event.key) {\n\t\t\t\tcase 'ArrowDown':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowUp':\n\t\t\t\t\tif (r.length) setActiveIndex((p) => (p + r.length - 1) % r.length);\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowRight':\n\t\t\t\tcase 'Enter':\n\t\t\t\t\tr[i]?.onActivate();\n\t\t\t\t\treturn true;\n\t\t\t\tcase 'ArrowLeft':\n\t\t\t\t\tif (h?.onBack) {\n\t\t\t\t\t\th.onBack();\n\t\t\t\t\t\treturn true;\n\t\t\t\t\t}\n\t\t\t\t\treturn false;\n\t\t\t\tdefault:\n\t\t\t\t\treturn false;\n\t\t\t}\n\t\t});\n\t\treturn () => registerKeyHandler(null);\n\t}, [registerKeyHandler]);\n\n\tconst variant = !activeCategory\n\t\t? 'categories'\n\t\t: rows.length && !rows[0].drillsIn\n\t\t? 'items'\n\t\t: 'sources';\n\n\t// Search lives inside a source's tool list (Manifest / Shopify) and in the\n\t// sub-agent list.\n\tconst showSearch =\n\t\t(activeCategory === 'tool' && !!source) \|\| activeCategory === 'subagent';\n\n\treturn (\n\t\t<PickerCard className={`bik-mention-picker bik-mention-picker--${variant}`}>\n\t\t\t{header && (\n\t\t\t\t<PickerBack\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={header.onBack}\n\t\t\t\t\tdisabled={!header.onBack}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: COLORS.surface.subdued,\n\t\t\t\t\t\tcursor: header.onBack ? 'pointer' : 'default',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{header.icon ? (\n\t\t\t\t\t\trenderSourceIcon(header.icon)\n\t\t\t\t\t) : header.onBack ? (\n\t\t\t\t\t\t<SvgArrowLeft\n\t\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\t\theight={20}\n\t\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t\t<TitleSmall> {header.title}</TitleSmall>\n\t\t\t\t</PickerBack>\n\t\t\t)}\n\t\t\t{showSearch && (\n\t\t\t\t<PickerSearchRow>\n\t\t\t\t\t<SearchIcon\n\t\t\t\t\t\twidth={20}\n\t\t\t\t\t\theight={20}\n\t\t\t\t\t\tcolor={COLORS.content.placeholder}\n\t\t\t\t\t/>\n\t\t\t\t\t<PickerSearchInput\n\t\t\t\t\t\t// Focus on open so the user can type immediately (appears only\n\t\t\t\t\t\t// after they drill into a source).\n\t\t\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\tvalue={search}\n\t\t\t\t\t\tplaceholder=\"Search\"\n\t\t\t\t\t\tdata-test=\"mention-picker-search\"\n\t\t\t\t\t\tonChange={(e) => setSearch(e.target.value)}\n\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\tif (!rows.length) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (e.key === 'ArrowDown') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'ArrowUp') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\tsetActiveIndex((p) => (p + rows.length - 1) % rows.length);\n\t\t\t\t\t\t\t} else if (e.key === 'Enter') {\n\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\trows[activeIndex]?.onActivate();\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t</PickerSearchRow>\n\t\t\t)}\n\t\t\t{rows.length === 0 ? (\n\t\t\t\t<PickerEmpty>\n\t\t\t\t\t{activeCategory === 'subagent'\n\t\t\t\t\t\t? 'No sub-agents available'\n\t\t\t\t\t\t: 'No tools available'}\n\t\t\t\t</PickerEmpty>\n\t\t\t) : (\n\t\t\t\trows.map((row, i) => (\n\t\t\t\t\t<PickerRow\n\t\t\t\t\t\tkey={row.id}\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t$active={i === activeIndex}\n\t\t\t\t\t\tonMouseEnter={() => setActiveIndex(i)}\n\t\t\t\t\t\tonClick={row.onActivate}\n\t\t\t\t\t>\n\t\t\t\t\t\t{row.isCreate ? (\n\t\t\t\t\t\t\t<CreateRowText>{row.label}</CreateRowText>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<PickerRowMain>\n\t\t\t\t\t\t\t\t\t{renderSourceIcon(row.icon)}\n\t\t\t\t\t\t\t\t\t<BodySecondary color={COLORS.content.primary}>\n\t\t\t\t\t\t\t\t\t\t{row.label}\n\t\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t\t</PickerRowMain>\n\t\t\t\t\t\t\t\t{row.drillsIn && <ChevronRight width={12} height={12} />}\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</PickerRow>\n\t\t\t\t))\n\t\t\t)}\n\t\t</PickerCard>\n\t);\n};\n\nconst PickerCard = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-width: 240px;\n\tmax-height: 301px;\n\toverflow-y: auto;\n\tbackground: ${COLORS.surface.standard};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px -2px 8px 0px #0000001f;\n`;\n\n// Search box at the top of a source's tool list (Manifest / Shopify).\nconst PickerSearchRow = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 10px 12px;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n`;\n\nconst PickerSearchInput = styled.input`\n\tflex: 1;\n\tmin-width: 0;\n\tborder: none;\n\toutline: none;\n\tbackground: transparent;\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tcolor: ${COLORS.content.primary};\n\n\t&::placeholder {\n\t\tcolor: ${COLORS.content.placeholder};\n\t}\n`;\n\nconst PickerRow = styled.button<{ $active?: boolean }>`\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tgap: 2px;\n\twidth: 100%;\n\tpadding: 8px 10px;\n\theight: 48px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: ${(p) => (p.$active ? COLORS.surface.subdued : 'transparent')};\n\tcursor: pointer;\n\ttext-align: left;\n\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n`;\n\n// Left cluster: leading source glyph + label (chevron stays right via PickerRow).\nconst PickerRowMain = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 12px;\n\tmin-width: 0;\n`;\n\n// \"Create new\" — centered brand text, no icon (matches the side-panel dropdown).\nconst CreateRowText = styled.div`\n\twidth: 100%;\n\ttext-align: center;\n\tcolor: ${COLORS.content.brand};\n\tfont-family: Inter;\n\tfont-size: 14px;\n\tfont-weight: 600;\n`;\n\nconst PickerBack = styled.button`\n\tdisplay: flex;\n\talign-items: center;\n\tpadding: 12px 16px;\n\tborder: none;\n\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\tbackground: transparent;\n\tcursor: pointer;\n\tfont-family: Inter;\n\tfont-size: 12px;\n\tfont-weight: 600;\n\theight: 48px;\n\tgap: 4px;\n`;\n\nconst PickerEmpty = styled.div`\n\tpadding: 12px 10px;\n\tfont-family: Inter;\n\tfont-size: 13px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["CATEGORIES","metaOf","item","rowLabel","CREATE_SUBAGENT_ID","MentionPicker","items","onSelect","registerKeyHandler","onClose","onCreateSubAgent","initialSource","category","setCategory","useState","source","setSource","activeIndex","setActiveIndex","search","setSearch","tools","useMemo","i","subAgents","sources","acc","t","s","availableCategories","c","soleCategory","activeCategory","header","toolSourceLabel","SOURCE_ICONS","rows","sq","leaves","q","useEffect","navRef","useRef","event","r","h","p","variant","showSearch","jsxs","PickerCard","PickerBack","COLORS","renderSourceIcon","jsx","SvgArrowLeft","TitleSmall","PickerSearchRow","SearchIcon","PickerSearchInput","e","PickerEmpty","row","PickerRow","CreateRowText","Fragment","PickerRowMain","BodySecondary","ChevronRight","styled"],"mappings":"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"}

package/dist/cjs/components/avatar/Avatar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react"),c=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),o=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),_=require("../../assets/icons/task.svg.js"),j=require("../../assets/icons/whatsapp_color.svg.js"),S=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),n={[i.SIZE.EXTRA_SMALL]:10,[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.LARGE]:32},u={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard,[i.AVATAR_BACKGROUND.BRAND]:a.COLORS.background.inverseLight};var A=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(A||{});const C=e=>{const[l,g]=m.useState(!1),h=()=>{const s=(e.name||"").split(".").join(" ").split(" ").map(b=>b.charAt(0).toUpperCase()).slice(0,2).join(""),r=u[e.background];return e.size===i.SIZE.LARGE?t.jsx(c.TitleMedium,{style:{color:r},children:s}):e.size===i.SIZE.MEDIUM?t.jsx(c.TitleSmall,{style:{color:r},children:s}):e.size===i.SIZE.SMALL?t.jsx(c.SubHeading,{style:{color:r},children:s}):t.jsx(c.BodyTiny,{style:{color:r,fontSize:"6.667px",lineHeight:"8px"},children:s})},R=()=>e.useNameFallback&&(!e.photoUrl||l)&&e.name?t.jsx("div",{children:h()}):e.useNameFallback&&e.photoUrl&&!l?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{g(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(o.default,{width:11,height:11});case"smtp":return t.jsx(o.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(j.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(_.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},O=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,T=()=>e.type===i.AVATAR_TYPES.IMAGE&&(l||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(S.AvatarStyle,{type:T(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&R(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:h()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:u[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:O()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=C;exports.BACKGROUND_VS_TEXT_COLOR_MAP=u;exports.MESSAGE_CHANNELS=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),b=require("react"),m=require("./Avatar.styled.js"),i=require("./AvatarHelper.js"),l=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),x=require("../../assets/icons/bik_livechat.svg.js"),h=require("../../assets/icons/email-channel.svg.js"),d=require("../../assets/icons/facebook_channel.svg.js"),y=require("../../assets/icons/gmail.svg.js"),f=require("../../assets/icons/instagram-channel.svg.js"),j=require("../../assets/icons/task.svg.js"),_=require("../../assets/icons/whatsapp_color.svg.js"),n={[i.SIZE.SMALL]:16,[i.SIZE.MEDIUM]:20,[i.SIZE.INBOX]:24,[i.SIZE.LARGE]:32},s={[i.AVATAR_BACKGROUND.LIGHT]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.WHITE]:a.COLORS.content.secondary,[i.AVATAR_BACKGROUND.DARK]:a.COLORS.surface.standard};var o=(e=>(e.INSTAGRAM="instagram",e.MESSENGER="messenger",e.WHATSAPP="whatsapp",e.GMAIL="gmail",e.LIVECHAT="livechat",e.GOOGLE_BUSINESS_CHAT="gbm",e.SHOPIFY="shopify",e.FACEBOOK="facebook",e.EMAIL="email",e.SMTP="smtp",e.FACEBOOK_CATALOG="facebook-catalog",e.TASKS="tasks",e.BIK_LIVECHAT="livechat",e))(o||{});const S=e=>{const[r,A]=b.useState(!1),u=()=>{const c=(e.name||"").split(".").join(" ").split(" ").map(T=>T.charAt(0).toUpperCase()).slice(0,2).join("");if(e.size===i.SIZE.SMALL)return t.jsx(l.BodyTiny,{style:{color:s[e.background]},children:c});if(e.size===i.SIZE.MEDIUM||e.size===i.SIZE.INBOX)return t.jsx(l.TitleSmall,{style:{color:s[e.background]},children:c});if(e.size===i.SIZE.LARGE)return t.jsx(l.TitleMedium,{style:{color:s[e.background]},children:c})},g=()=>e.useNameFallback&&(!e.photoUrl||r)&&e.name?t.jsx("div",{children:u()}):e.useNameFallback&&e.photoUrl&&!r?t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl,onError:()=>{A(!0)}}):t.jsx("img",{alt:"",width:i.AVATAR_SIZE_MAP[e.size],height:i.AVATAR_SIZE_MAP[e.size],style:{borderRadius:e?.borderRadius||"50%",objectFit:"contain"},src:e.photoUrl}),I=()=>{switch(e.channelName){case"email":return t.jsx(h.default,{width:11,height:11});case"smtp":return t.jsx(h.default,{width:11,height:11});case"facebook":return t.jsx(d.default,{width:11,height:11});case"facebook-catalog":return t.jsx(d.default,{width:11,height:11});case"messenger":return t.jsx(d.default,{width:11,height:11});case"instagram":return t.jsx(f.default,{width:11,height:11});case"whatsapp":return t.jsx(_.default,{width:11,height:11});case"gmail":return t.jsx(y.default,{width:11,height:11});case"tasks":return t.jsx(j.default,{width:11,height:11});case"livechat":return t.jsx(x.default,{width:11,height:11})}},R=()=>e.status?t.jsx("div",{style:{backgroundColor:e.status==="ONLINE"?a.COLORS.special.whatsapp.brand:a.COLORS.content.inactive,width:"8px",height:"8px",borderRadius:"50%"}}):null,O=()=>e.type===i.AVATAR_TYPES.IMAGE&&(r||!e.photoUrl)&&e.useNameFallback&&e.name?i.AVATAR_TYPES.INITIALS:e.type;return t.jsxs("div",{style:{position:"relative"},children:[t.jsxs(m.AvatarStyle,{type:O(),size:e.size,background:e.background,children:[e.type===i.AVATAR_TYPES.IMAGE&&g(),e.type===i.AVATAR_TYPES.INITIALS&&t.jsx("div",{children:u()}),e.type===i.AVATAR_TYPES.ICON&&e.icon&&t.jsx(e.icon,{width:n[e.size],height:n[e.size],color:s[e.background]})]}),e.inboxSettings&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:14,height:14,borderRadius:e?.borderRadius||"50%",display:"flex",justifyContent:"center",backgroundColor:e.inboxSettings.isSelected?e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.background.brandLight:e.inboxSettings.isComments?a.COLORS.content.primary:a.COLORS.surface.standard,alignItems:"center"},children:I()}),e.status&&t.jsx("div",{style:{position:"absolute",left:n[e.size]+"px",top:n[e.size]+"px",width:11,height:11,borderRadius:"50%",display:"flex",justifyContent:"center",backgroundColor:a.COLORS.surface.standard,alignItems:"center"},children:R()})]})};exports.AVATAR_SIZE_VS_ICON_SIZE_MAP=n;exports.Avatar=S;exports.BACKGROUND_VS_TEXT_COLOR_MAP=s;exports.MESSAGE_CHANNELS=o;
 //# sourceMappingURL=Avatar.js.map

package/dist/cjs/components/avatar/Avatar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport {\n\tBodyTiny,\n\tSubHeading,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\nimport { AvatarStyle } from './Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from './AvatarHelper';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.EXTRA_SMALL]: 10,\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n\t[AVATAR_BACKGROUND.BRAND]: COLORS.background.inverseLight,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tconst color = BACKGROUND_VS_TEXT_COLOR_MAP[props.background];\n\n\t\tif (props.size === SIZE.LARGE) {\n\t\t\treturn <TitleMedium style={{ color }}>{initials}</TitleMedium>;\n\t\t}\n\t\tif (props.size === SIZE.MEDIUM) {\n\t\t\treturn <TitleSmall style={{ color }}>{initials}</TitleSmall>;\n\t\t}\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn <SubHeading style={{ color }}>{initials}</SubHeading>;\n\t\t}\n\t\t// EXTRA_SMALL: 6.667px / 8px per Figma. BodyTiny's 10px/12px is too large\n\t\t// for the 16px circle (leaves 2px padding instead of the intended 4px).\n\t\treturn (\n\t\t\t<BodyTiny style={{ color, fontSize: '6.667px', lineHeight: '8px' }}>\n\t\t\t\t{initials}\n\t\t\t</BodyTiny>\n\t\t);\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","color","TitleMedium","TitleSmall","SubHeading","jsx","BodyTiny","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}
1	+ {"version":3,"file":"Avatar.js","sources":["../../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { AvatarStyle } from '@src/components/avatar/Avatar.styled';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport {\n\tBodyTiny,\n\tTitleMedium,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport BikLivechatIcon from '../../assets/icons/bik_livechat.svg';\nimport EmailIcon from '../../assets/icons/email-channel.svg';\nimport FacebookIcon from '../../assets/icons/facebook_channel.svg';\nimport GmailIcon from '../../assets/icons/gmail.svg';\nimport InstagramIcon from '../../assets/icons/instagram-channel.svg';\nimport TaskIcon from '../../assets/icons/task.svg';\nimport WhatsappIcon from '../../assets/icons/whatsapp_color.svg';\n\nexport const AVATAR_SIZE_VS_ICON_SIZE_MAP = {\n\t[SIZE.SMALL]: 16,\n\t[SIZE.MEDIUM]: 20,\n\t[SIZE.INBOX]: 24,\n\t[SIZE.LARGE]: 32,\n};\n\nexport const BACKGROUND_VS_TEXT_COLOR_MAP = {\n\t[AVATAR_BACKGROUND.LIGHT]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.WHITE]: COLORS.content.secondary,\n\t[AVATAR_BACKGROUND.DARK]: COLORS.surface.standard,\n};\n\nexport type AvatarProps = {\n\ttype: AVATAR_TYPES;\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\tname?: string;\n\tphotoUrl?: string;\n\ticon?: React.FC<{ width: number; height: number; color: string }>;\n\tuseNameFallback?: boolean;\n\tchannelName?: MESSAGE_CHANNELS;\n\tborderRadius?: string;\n\tinboxSettings?: {\n\t\tisSelected: boolean;\n\t\tisComments: boolean;\n\t};\n\tstatus?: 'ONLINE' \| 'OFFLINE' \| 'AWAY';\n};\n\nexport const enum MESSAGE_CHANNELS {\n\tINSTAGRAM = 'instagram',\n\tMESSENGER = 'messenger',\n\tWHATSAPP = 'whatsapp',\n\tGMAIL = 'gmail',\n\tLIVECHAT = 'livechat',\n\tGOOGLE_BUSINESS_CHAT = 'gbm',\n\tSHOPIFY = 'shopify',\n\tFACEBOOK = 'facebook',\n\tEMAIL = 'email',\n\tSMTP = 'smtp',\n\tFACEBOOK_CATALOG = 'facebook-catalog',\n\tTASKS = 'tasks',\n\tBIK_LIVECHAT = 'livechat',\n}\n\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n\tconst [imgError, setImgError] = useState<boolean>(false);\n\n\tconst getInitials = () => {\n\t\tconst initials = (props.name \|\| '')\n\t\t\t.split('.')\n\t\t\t.join(' ')\n\t\t\t.split(' ')\n\t\t\t.map((e) => e.charAt(0).toUpperCase())\n\t\t\t.slice(0, 2)\n\t\t\t.join('');\n\n\t\tif (props.size === SIZE.SMALL) {\n\t\t\treturn (\n\t\t\t\t<BodyTiny\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</BodyTiny>\n\t\t\t);\n\t\t} else if (props.size === SIZE.MEDIUM \|\| props.size === SIZE.INBOX) {\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t} else if (props.size === SIZE.LARGE) {\n\t\t\treturn (\n\t\t\t\t<TitleMedium\n\t\t\t\t\tstyle={{ color: BACKGROUND_VS_TEXT_COLOR_MAP[props.background] }}\n\t\t\t\t>\n\t\t\t\t\t{initials}\n\t\t\t\t</TitleMedium>\n\t\t\t);\n\t\t}\n\t};\n\n\tconst getImageBlock = () => {\n\t\tif (props.useNameFallback && (!props.photoUrl \|\| imgError) && props.name) {\n\t\t\treturn <div>{getInitials()}</div>;\n\t\t}\n\t\tif (props.useNameFallback && props.photoUrl && !imgError) {\n\t\t\treturn (\n\t\t\t\t<img\n\t\t\t\t\talt=\"\"\n\t\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t\t}}\n\t\t\t\t\tsrc={props.photoUrl}\n\t\t\t\t\tonError={() => {\n\t\t\t\t\t\tsetImgError(true);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<img\n\t\t\t\talt=\"\"\n\t\t\t\twidth={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\theight={AVATAR_SIZE_MAP[props.size]}\n\t\t\t\tstyle={{\n\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\tobjectFit: 'contain',\n\t\t\t\t}}\n\t\t\t\tsrc={props.photoUrl}\n\t\t\t/>\n\t\t);\n\t};\n\n\tconst getChannelIcon = () => {\n\t\tswitch (props.channelName) {\n\t\t\tcase MESSAGE_CHANNELS.EMAIL:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.SMTP:\n\t\t\t\treturn <EmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.FACEBOOK_CATALOG:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.MESSENGER:\n\t\t\t\treturn <FacebookIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.INSTAGRAM:\n\t\t\t\treturn <InstagramIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.WHATSAPP:\n\t\t\t\treturn <WhatsappIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.GMAIL:\n\t\t\t\treturn <GmailIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.TASKS:\n\t\t\t\treturn <TaskIcon width={11} height={11} />;\n\t\t\tcase MESSAGE_CHANNELS.BIK_LIVECHAT:\n\t\t\t\treturn <BikLivechatIcon width={11} height={11} />;\n\t\t}\n\t};\n\n\tconst getOnlineStatusIcon = () => {\n\t\treturn props.status ? (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tprops.status === 'ONLINE'\n\t\t\t\t\t\t\t? COLORS.special.whatsapp.brand\n\t\t\t\t\t\t\t: COLORS.content.inactive,\n\t\t\t\t\twidth: '8px',\n\t\t\t\t\theight: '8px',\n\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t}}\n\t\t\t></div>\n\t\t) : null;\n\t};\n\n\tconst getPropsType = () => {\n\t\tif (\n\t\t\tprops.type === AVATAR_TYPES.IMAGE &&\n\t\t\t(imgError \|\| !props.photoUrl) &&\n\t\t\tprops.useNameFallback &&\n\t\t\tprops.name\n\t\t) {\n\t\t\treturn AVATAR_TYPES.INITIALS;\n\t\t}\n\n\t\treturn props.type;\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tposition: 'relative',\n\t\t\t}}\n\t\t>\n\t\t\t<AvatarStyle\n\t\t\t\ttype={getPropsType()}\n\t\t\t\tsize={props.size}\n\t\t\t\tbackground={props.background}\n\t\t\t>\n\t\t\t\t{props.type === AVATAR_TYPES.IMAGE && getImageBlock()}\n\t\t\t\t{props.type === AVATAR_TYPES.INITIALS && <div>{getInitials()}</div>}\n\t\t\t\t{props.type === AVATAR_TYPES.ICON && props.icon && (\n\t\t\t\t\t<props.icon\n\t\t\t\t\t\twidth={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\theight={AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size]}\n\t\t\t\t\t\tcolor={BACKGROUND_VS_TEXT_COLOR_MAP[props.background]}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</AvatarStyle>\n\t\t\t{props.inboxSettings && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 14,\n\t\t\t\t\t\theight: 14,\n\t\t\t\t\t\tborderRadius: props?.borderRadius \|\| '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: props.inboxSettings.isSelected\n\t\t\t\t\t\t\t? props.inboxSettings.isComments\n\t\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t\t: COLORS.background.brandLight\n\t\t\t\t\t\t\t: props.inboxSettings.isComments\n\t\t\t\t\t\t\t? COLORS.content.primary\n\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getChannelIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t{props.status && (\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tleft: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\ttop: AVATAR_SIZE_VS_ICON_SIZE_MAP[props.size] + 'px',\n\t\t\t\t\t\twidth: 11,\n\t\t\t\t\t\theight: 11,\n\t\t\t\t\t\tborderRadius: '50%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tbackgroundColor: COLORS.surface.standard,\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{getOnlineStatusIcon()}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"names":["AVATAR_SIZE_VS_ICON_SIZE_MAP","SIZE","BACKGROUND_VS_TEXT_COLOR_MAP","AVATAR_BACKGROUND","COLORS","MESSAGE_CHANNELS","Avatar","props","imgError","setImgError","useState","getInitials","initials","e","jsx","BodyTiny","TitleSmall","TitleMedium","getImageBlock","AVATAR_SIZE_MAP","getChannelIcon","EmailIcon","FacebookIcon","InstagramIcon","WhatsappIcon","GmailIcon","TaskIcon","BikLivechatIcon","getOnlineStatusIcon","getPropsType","AVATAR_TYPES","jsxs","AvatarStyle"],"mappings":"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"}

package/dist/cjs/components/avatar/Avatar.styled.js CHANGED Viewed

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("styled-components"),t=require("./AvatarHelper.js"),A=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(r),d=n.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=require("styled-components"),t=require("./AvatarHelper.js"),r=require("../../constants/Theme.js"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=a(A),o=n.default.div`
 	width: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	height: ${e=>t.AVATAR_SIZE_MAP[e.size]+"px"};
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?A.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?A.COLORS.surface.standard:e.background===t.AVATAR_BACKGROUND.BRAND?A.COLORS.background.brandLight:A.COLORS.background.inverse};
-	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+A.COLORS.stroke.primary:0};
+	background-color: ${e=>e.type===t.AVATAR_TYPES.IMAGE?"null":e.background===t.AVATAR_BACKGROUND.LIGHT?r.COLORS.background.base:e.background===t.AVATAR_BACKGROUND.WHITE?r.COLORS.surface.standard:r.COLORS.background.inverse};
+	border: ${e=>e.background===t.AVATAR_BACKGROUND.LIGHT||e.background===t.AVATAR_BACKGROUND.WHITE?"1px solid "+r.COLORS.stroke.primary:0};
 	border-radius: 50%;
-`;exports.AvatarStyle=d;
+`;exports.AvatarStyle=o;
 //# sourceMappingURL=Avatar.styled.js.map

package/dist/cjs/components/avatar/Avatar.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: ~~props.background === AVATAR_BACKGROUND.BRAND\n\t\t\t?~~ COLORS.background.~~brandLight\n\t\t\t: COLORS.background.~~inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,~~EAAAA~~,~~OAAO,~~QAAQ,~~SACfJ~~,~~EAAM~~,~~aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,~~WAAW,~~WAClBA,EAAAA,~~OAAO~~,WAAW,OAAO~~;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA"}
1	+ {"version":3,"file":"Avatar.styled.js","sources":["../../../../src/components/avatar/Avatar.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport {\n\tAVATAR_BACKGROUND,\n\tAVATAR_SIZE_MAP,\n\tAVATAR_TYPES,\n\tSIZE,\n} from '@src/components/avatar/AvatarHelper';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const AvatarStyle = styled.div<{\n\tsize: SIZE;\n\tbackground: AVATAR_BACKGROUND;\n\ttype: AVATAR_TYPES;\n}>`\n\twidth: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\theight: ${(props) => AVATAR_SIZE_MAP[props.size] + 'px'};\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbackground-color: ${(props) =>\n\t\tprops.type === AVATAR_TYPES.IMAGE\n\t\t\t? 'null'\n\t\t\t: props.background === AVATAR_BACKGROUND.LIGHT\n\t\t\t? COLORS.background.base\n\t\t\t: props.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? COLORS.surface.standard\n\t\t\t: COLORS.background.inverse};\n\tborder: ${(props) =>\n\t\tprops.background === AVATAR_BACKGROUND.LIGHT \|\|\n\t\tprops.background === AVATAR_BACKGROUND.WHITE\n\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t: 0};\n\tborder-radius: 50%;\n`;\n"],"names":["AvatarStyle","styled","props","AVATAR_SIZE_MAP","AVATAR_TYPES","AVATAR_BACKGROUND","COLORS"],"mappings":"yPASaA,EAAcC,EAAAA,QAAO;AAAA,UAKvBC,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA,WAC3CA,GAAUC,EAAAA,gBAAgBD,EAAM,IAAI,EAAI,IAAI;AAAA;AAAA;AAAA;AAAA,qBAIlCA,GACpBA,EAAM,OAASE,EAAAA,aAAa,MACzB,OACAF,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,EAAAA,OAAO,WAAW,KAClBJ,EAAM,aAAeG,EAAAA,kBAAkB,MACvCC,SAAO,QAAQ,SACfA,SAAO,WAAW,OAAO;AAAA,WAClBJ,GACVA,EAAM,aAAeG,EAAAA,kBAAkB,OACvCH,EAAM,aAAeG,EAAAA,kBAAkB,MACpC,aAAeC,EAAAA,OAAO,OAAO,QAC7B,CAAC;AAAA;AAAA"}

package/dist/cjs/components/avatar/AvatarHelper.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var A=(L=>(L.IMAGE="IMAGE",L.INITIALS="INITIALS",L.ICON="ICON",L))(A||{}),I=(L=>(L.EXTRA_SMALL="EXTRA_SMALL",L.SMALL="SMALL",L.MEDIUM="MEDIUM",L.LARGE="LARGE",L))(I||{}),M=(L=>(L.LIGHT="LIGHT",L.DARK="DARK",L.WHITE="WHITE",L.BRAND="BRAND",L))(M||{});const r={EXTRA_SMALL:16,SMALL:24,MEDIUM:40,LARGE:64};exports.AVATAR_BACKGROUND=M;exports.AVATAR_SIZE_MAP=r;exports.AVATAR_TYPES=A;exports.SIZE=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var M=(I=>(I.IMAGE="IMAGE",I.INITIALS="INITIALS",I.ICON="ICON",I))(M||{}),r=(I=>(I.SMALL="SMALL",I.MEDIUM="MEDIUM",I.LARGE="LARGE",I.INBOX="INBOX",I))(r||{}),A=(I=>(I.LIGHT="LIGHT",I.DARK="DARK",I.WHITE="WHITE",I))(A||{});const L={SMALL:24,MEDIUM:40,LARGE:64,INBOX:30};exports.AVATAR_BACKGROUND=A;exports.AVATAR_SIZE_MAP=L;exports.AVATAR_TYPES=M;exports.SIZE=r;
 //# sourceMappingURL=AvatarHelper.js.map

package/dist/cjs/components/avatar/AvatarHelper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\~~tEXTRA_SMALL~~ = '~~EXTRA_SMALL~~',\n\~~tSMALL~~ = '~~SMALL~~',\n\~~tMEDIUM~~ = '~~MEDIUM~~',\n\~~tLARGE~~ = '~~LARGE~~',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n~~\tBRAND = 'BRAND',\n~~}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.~~EXTRA_SMALL~~]: 16,\n\t[SIZE.~~SMALL~~]: 24,\n\t[SIZE.~~MEDIUM~~]: 40,\n\t[SIZE.~~LARGE~~]: 64,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"gFAAO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,KAAO,OAHIA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACXA,EAAA,~~YAAc,cACdA,EAAA,~~MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,MAAQ,QAJGA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,MAAQ,~~QACRA~~,~~EAAA,MAAQ,QAJGA,~~IAAAA,GAAA,CAAA,CAAA,~~EAOL~~,MAAMC,EAAkB,CAC7B,~~YAAmB,GACnB,~~MAAa,GACb,OAAc,GACd,MAAa,EACf"}
1	+ {"version":3,"file":"AvatarHelper.js","sources":["../../../../src/components/avatar/AvatarHelper.ts"],"sourcesContent":["export enum AVATAR_TYPES {\n\tIMAGE = 'IMAGE',\n\tINITIALS = 'INITIALS',\n\tICON = 'ICON',\n}\n\nexport enum SIZE {\n\tSMALL = 'SMALL',\n\tMEDIUM = 'MEDIUM',\n\tLARGE = 'LARGE',\n\tINBOX = 'INBOX',\n}\n\nexport enum AVATAR_BACKGROUND {\n\tLIGHT = 'LIGHT',\n\tDARK = 'DARK',\n\tWHITE = 'WHITE',\n}\n\nexport const AVATAR_SIZE_MAP = {\n\t[SIZE.SMALL]: 24,\n\t[SIZE.MEDIUM]: 40,\n\t[SIZE.LARGE]: 64,\n\t[SIZE.INBOX]: 30,\n};\n"],"names":["AVATAR_TYPES","SIZE","AVATAR_BACKGROUND","AVATAR_SIZE_MAP"],"mappings":"gFAAO,IAAKA,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,SAAW,WACXA,EAAA,KAAO,OAHIA,IAAAA,GAAA,CAAA,CAAA,EAMAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,OAAS,SACTA,EAAA,MAAQ,QACRA,EAAA,MAAQ,QAJGA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,MAAQ,QACRA,EAAA,KAAO,OACPA,EAAA,MAAQ,QAHGA,IAAAA,GAAA,CAAA,CAAA,EAML,MAAMC,EAAkB,CAC7B,MAAa,GACb,OAAc,GACd,MAAa,GACb,MAAa,EACf"}