@bikdotai/bik-component-library 0.0.826 → 0.0.828

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

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

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

@@ -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"),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`
+"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`
 	display: flex;
 	align-items: center;
 	border: 1px solid transparent;
@@ -10,7 +10,7 @@
 	background: #ffe8ef;
 	color: #f53f77;
 	border-radius: 16px 0 0 16px;
-	padding: 6px 10px;
+	padding: 4px 6px;
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -22,16 +22,27 @@
 		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 6px;
+	padding: 4px;
 	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`
@@ -78,5 +89,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: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=_;
+`,_=({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=_;
 //# sourceMappingURL=AIRephraseButton.js.map

package/dist/cjs/components/WhatsAppTextEditor/AIRephraseButton.js.map

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

package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js

@@ -1,2 +1,18 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),oe=require("../../../assets/icons/cross.svg.js"),t=require("react"),E=require("../../TypographyStyle.js"),L=require("../../../utils/arrayUtils.js"),q=require("../../../constants/Theme.js"),u=require("../AgentBuilder.styled.js"),se=require("../constants/charLimits.js"),G=require("../utils/mentionSerialization.js"),c=require("../utils/sourceIcons.js"),U=require("./MentionEditor.js"),re=require("./SelectableListSection.js"),ae=require("../../input/Input.js"),N=require("../../button/Button.js"),ie=require("../../toaster/Toaster.js"),ue=({onClose:h,onSave:H,availableTools:a,onImprove:ce,title:K="Create sub-agent",initial:l,appLabel:v="Manifest",charLimits:p=se.AGENT_CHAR_LIMITS})=>{const[b,F]=t.useState(l?.name??""),[d,y]=t.useState(l?.instructions??""),[g,f]=t.useState(l?.guardrail??""),[x,m]=t.useState(l?.tools??[]),[A,O]=t.useState(!1),[w,_]=t.useState(0),[z,k]=t.useState(0),[le,de]=t.useState(null),C=t.useMemo(()=>G.buildAgentMentionItems(a,[],v),[a,v]),S=t.useRef({}),I=t.useRef("instructions"),$=t.useCallback(e=>{S.current.instructions=e??void 0},[]),W=t.useCallback(e=>{S.current.guardrail=e??void 0},[]),D=t.useCallback(()=>{I.current="instructions"},[]),J=t.useCallback(()=>{I.current="guardrail"},[]),M=t.useCallback((e,n)=>{e==="tool"&&m(s=>L.addUnique(s,n))},[]),Q=t.useCallback(e=>{(S.current[I.current]??S.current.instructions)?.("tool",e)},[]),[T,j]=t.useState(null),R=t.useRef(null),P=t.useRef(0),V=e=>{const n=a.find(r=>r.tool_id===e),s=`{{tool:${e}}}`,i=r=>r.split(s).join("");R.current={instructions:d,guardrail:g,tools:x},y(r=>i(r)),f(r=>i(r)),m(r=>r.filter(ne=>ne!==e)),_(r=>r+1),k(r=>r+1),P.current+=1,j({id:P.current,message:`Tool "${n?.display_name??"Tool"}" removed`})},X=()=>{const e=R.current;e&&(y(e.instructions),f(e.guardrail),m(e.tools),_(n=>n+1),k(n=>n+1),R.current=null),j(null)},B=b.trim().length>0&&(d.trim().length>0||g.trim().length>0),Y=x.map(e=>{const n=a.find(s=>s.tool_id===e);return n?{id:e,label:n.display_name,icon:c.SOURCE_ICONS[n.source??"manifest"]}:null}).filter(e=>e!==null),Z=a.map(e=>({label:e.display_name,value:e.tool_id,leadingIcon:c.renderSourceIcon(c.SOURCE_ICONS[e.source??"manifest"])??void 0})),ee=(()=>{const e=[],n=new Map;return a.forEach(s=>{const i=s.source??"manifest";n.has(i)||(n.set(i,[]),e.push(i)),n.get(i)?.push({label:s.display_name,value:s.tool_id,leadingIcon:c.renderSourceIcon(c.SOURCE_ICONS[s.source??"manifest"])??void 0})}),e.map(s=>({source:s,label:G.toolSourceLabel(s),options:n.get(s)??[]}))})(),te=async()=>{if(!B||A)return;const e=H({name:b.trim(),instructions:d,guardrail:g,tools:x});if(e&&typeof e.then=="function"){O(!0);try{await e}finally{O(!1)}}};return o.jsxs(o.Fragment,{children:[o.jsx(u.SubAgentScrim,{onClick:h,"data-test":"subagent-scrim"}),o.jsxs(u.SubAgentPanel,{"data-test":"create-subagent-panel",children:[o.jsxs(u.SubAgentPanelHeader,{children:[o.jsxs(u.SubAgentPanelHeaderText,{children:[o.jsx(E.TitleRegular,{color:q.COLORS.content.primary,children:K}),o.jsx(E.BodySecondary,{color:q.COLORS.content.secondary,children:"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."})]}),o.jsx(u.SubAgentCloseButton,{onClick:h,"aria-label":"Close",children:o.jsx(oe.default,{width:20,height:20,color:q.COLORS.content.secondary})})]}),o.jsxs(u.SubAgentPanelBody,{children:[o.jsx(ae.Input,{"data-test":"subagent-name",labelText:"Agent name",labelTextBold:!0,placeholder:"Enter agent name",value:b,maxCharLimit:p.name,maxCharLimitPosition:"TOP",maxCharStyle:{fontSize:12,lineHeight:"16px"},onChangeText:F}),o.jsx(U.MentionEditor,{"data-test":"subagent-instructions",label:"Instructions",value:d,onChange:y,maxLength:p.instructions,placeholder:"Write the steps in plain English. Type @ to reference a tool.",minHeight:"160px",resetKey:`instr-${w}`,mentionItems:C,tools:a,onMentionSelect:M,onFocus:D,registerInsert:$}),o.jsx(U.MentionEditor,{"data-test":"subagent-guardrail",label:"Guardrails",value:g,onChange:f,maxLength:p.guardrail,placeholder:"e.g. Never discuss competitor pricing. Type @ to reference a tool.",minHeight:"160px",resetKey:`guard-${z}`,mentionItems:C,tools:a,onMentionSelect:M,onFocus:J,registerInsert:W}),o.jsx(re.SelectableListSection,{title:"Tools this agent can use",dataTestPrefix:"subagent-tools",items:Y,addableOptions:Z,sourceGroups:ee,mentionItems:C,emptyText:"No tools added yet.",onAdd:e=>{Q(e),m(n=>L.addUnique(n,e))},onRemove:V})]}),o.jsxs(u.SubAgentPanelFooter,{children:[o.jsx(N.Button,{"data-test":"subagent-save",buttonType:"primary",size:"small",buttonText:"Save",disabled:!B,isLoading:A,onClick:te}),o.jsx(N.Button,{"data-test":"subagent-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:h})]})]}),T&&o.jsx(ie.Toaster,{text:T.message,type:"info",position:"top-right",autoClose:5e3,hideCloseButton:!0,buttonProps:{buttonText:"Undo",showButton:!0,onButtonClick:()=>(X(),{})},onCloseToast:()=>j(null)},T.id)]})};exports.CreateSubAgentPanel=ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),ut=require("../../../assets/icons/cross.svg.js"),o=require("react"),ct=require("styled-components"),w=require("../../TypographyStyle.js"),N=require("../../../utils/arrayUtils.js"),l=require("../../../constants/Theme.js"),c=require("../AgentBuilder.styled.js"),lt=require("../constants/charLimits.js"),H=require("../utils/mentionSerialization.js"),p=require("../utils/sourceIcons.js"),K=require("./MentionEditor.js"),dt=require("./SelectableListSection.js"),gt=require("../../input/Input.js"),z=require("../../button/Button.js"),mt=require("../../toaster/Toaster.js"),pt=i=>i&&typeof i=="object"&&"default"in i?i:{default:i},ht=pt(ct),F=ht.default.button`
+	align-self: flex-start;
+	border: 1px solid ${l.COLORS.stroke.primary};
+	color: ${l.COLORS.content.primary};
+	background: ${l.COLORS.surface.standard};
+	border-radius: 8px;
+	padding: 6px 12px;
+	font-size: 13px;
+	line-height: 1.1;
+	font-weight: 600;
+	cursor: pointer;
+
+	&:disabled {
+		cursor: default;
+		opacity: 0.6;
+	}
+`,St=({onClose:i,onSave:$,availableTools:u,onImprove:h,title:D="Create sub-agent",initial:S,appLabel:L="Manifest",charLimits:C=lt.AGENT_CHAR_LIMITS})=>{const[I,W]=o.useState(S?.name??""),[d,b]=o.useState(S?.instructions??""),[g,f]=o.useState(S?.guardrail??""),[j,y]=o.useState(S?.tools??[]),[k,B]=o.useState(!1),[J,v]=o.useState(0),[Q,R]=o.useState(0),[m,M]=o.useState(null),T=o.useMemo(()=>H.buildAgentMentionItems(u,[],L),[u,L]),x=o.useRef({}),O=o.useRef("instructions"),V=o.useCallback(t=>{x.current.instructions=t??void 0},[]),X=o.useCallback(t=>{x.current.guardrail=t??void 0},[]),Y=o.useCallback(()=>{O.current="instructions"},[]),Z=o.useCallback(()=>{O.current="guardrail"},[]),P=o.useCallback((t,n)=>{t==="tool"&&y(s=>N.addUnique(s,n))},[]),tt=o.useCallback(t=>{(x.current[O.current]??x.current.instructions)?.("tool",t)},[]),[q,A]=o.useState(null),_=o.useRef(null),E=o.useRef(0),et=t=>{const n=u.find(r=>r.tool_id===t),s=`{{tool:${t}}}`,a=r=>r.split(s).join("");_.current={instructions:d,guardrail:g,tools:j},b(r=>a(r)),f(r=>a(r)),y(r=>r.filter(it=>it!==t)),v(r=>r+1),R(r=>r+1),E.current+=1,A({id:E.current,message:`Tool "${n?.display_name??"Tool"}" removed`})},nt=()=>{const t=_.current;t&&(b(t.instructions),f(t.guardrail),y(t.tools),v(n=>n+1),R(n=>n+1),_.current=null),A(null)},G=I.trim().length>0&&(d.trim().length>0||g.trim().length>0),ot=j.map(t=>{const n=u.find(s=>s.tool_id===t);return n?{id:t,label:n.display_name,icon:p.SOURCE_ICONS[n.source??"manifest"]}:null}).filter(t=>t!==null),st=u.map(t=>({label:t.display_name,value:t.tool_id,leadingIcon:p.renderSourceIcon(p.SOURCE_ICONS[t.source??"manifest"])??void 0})),rt=(()=>{const t=[],n=new Map;return u.forEach(s=>{const a=s.source??"manifest";n.has(a)||(n.set(a,[]),t.push(a)),n.get(a)?.push({label:s.display_name,value:s.tool_id,leadingIcon:p.renderSourceIcon(p.SOURCE_ICONS[s.source??"manifest"])??void 0})}),t.map(s=>({source:s,label:H.toolSourceLabel(s),options:n.get(s)??[]}))})(),at=async()=>{if(!G||k)return;const t=$({name:I.trim(),instructions:d,guardrail:g,tools:j});if(t&&typeof t.then=="function"){B(!0);try{await t}finally{B(!1)}}},U=async t=>{if(!(!h||m)){M(t);try{const s=await h(t,t==="instructions"?d:g);t==="instructions"?(b(s),v(a=>a+1)):(f(s),R(a=>a+1))}finally{M(null)}}};return e.jsxs(e.Fragment,{children:[e.jsx(c.SubAgentScrim,{onClick:i,"data-test":"subagent-scrim"}),e.jsxs(c.SubAgentPanel,{"data-test":"create-subagent-panel",children:[e.jsxs(c.SubAgentPanelHeader,{children:[e.jsxs(c.SubAgentPanelHeaderText,{children:[e.jsx(w.TitleRegular,{color:l.COLORS.content.primary,children:D}),e.jsx(w.BodySecondary,{color:l.COLORS.content.secondary,children:"Each sub-agent handles one piece of the job. Use @ in the main instructions to call them."})]}),e.jsx(c.SubAgentCloseButton,{onClick:i,"aria-label":"Close",children:e.jsx(ut.default,{width:20,height:20,color:l.COLORS.content.secondary})})]}),e.jsxs(c.SubAgentPanelBody,{children:[e.jsx(gt.Input,{"data-test":"subagent-name",labelText:"Agent name",labelTextBold:!0,placeholder:"Enter agent name",value:I,maxCharLimit:C.name,maxCharLimitPosition:"TOP",maxCharStyle:{fontSize:12,lineHeight:"16px"},onChangeText:W}),e.jsx(K.MentionEditor,{"data-test":"subagent-instructions",label:"Instructions",value:d,onChange:b,maxLength:C.instructions,placeholder:"Write the steps in plain English. Type @ to reference a tool.",minHeight:"160px",resetKey:`instr-${J}`,mentionItems:T,tools:u,onMentionSelect:P,onFocus:Y,registerInsert:V,action:h?e.jsx(F,{type:"button","data-test":"subagent-improve-instructions",disabled:m!==null,onClick:()=>U("instructions"),children:m==="instructions"?"Improving…":"Improve with AI"}):void 0}),e.jsx(K.MentionEditor,{"data-test":"subagent-guardrail",label:"Guardrails",value:g,onChange:f,maxLength:C.guardrail,placeholder:"e.g. Never discuss competitor pricing. Type @ to reference a tool.",minHeight:"160px",resetKey:`guard-${Q}`,mentionItems:T,tools:u,onMentionSelect:P,onFocus:Z,registerInsert:X,action:h?e.jsx(F,{type:"button","data-test":"subagent-improve-guardrail",disabled:m!==null,onClick:()=>U("guardrail"),children:m==="guardrail"?"Improving…":"Improve with AI"}):void 0}),e.jsx(dt.SelectableListSection,{title:"Tools this agent can use",dataTestPrefix:"subagent-tools",items:ot,addableOptions:st,sourceGroups:rt,mentionItems:T,emptyText:"No tools added yet.",onAdd:t=>{tt(t),y(n=>N.addUnique(n,t))},onRemove:et})]}),e.jsxs(c.SubAgentPanelFooter,{children:[e.jsx(z.Button,{"data-test":"subagent-save",buttonType:"primary",size:"small",buttonText:"Save",disabled:!G,isLoading:k,onClick:at}),e.jsx(z.Button,{"data-test":"subagent-cancel",buttonType:"tertiaryGray",size:"small",buttonText:"Cancel",onClick:i})]})]}),q&&e.jsx(mt.Toaster,{text:q.message,type:"info",position:"top-right",autoClose:5e3,hideCloseButton:!0,buttonProps:{buttonText:"Undo",showButton:!0,onButtonClick:()=>(nt(),{})},onCloseToast:()=>A(null)},q.id)]})};exports.CreateSubAgentPanel=St;
 //# sourceMappingURL=CreateSubAgentPanel.js.map

package/dist/cjs/components/agent-builder/components/CreateSubAgentPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport {\n\tbuildAgentMentionItems,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n\tSourceGroup,\n} from './SelectableListSection';\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t// The token stores the tool id (a tool's id is its tool_id).\n\t\tconst token = `{{tool:${id}}}`;\n\t\tconst strip = (text: string) => text.split(token).join('');\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t}));\n\n\t// Group tools by source (Manifest / Shopify / …) so the empty state shows the\n\t// same per-source buttons as the main builder's side panel.\n\tconst toolSourceGroups: SourceGroup[] = (() => {\n\t\tconst order: string[] = [];\n\t\tconst bySource = new Map<string, SingleOption[]>();\n\t\tavailableTools.forEach((t) => {\n\t\t\tconst src = t.source ?? 'manifest';\n\t\t\tif (!bySource.has(src)) {\n\t\t\t\tbySource.set(src, []);\n\t\t\t\torder.push(src);\n\t\t\t}\n\t\t\tbySource.get(src)?.push({\n\t\t\t\tlabel: t.display_name,\n\t\t\t\tvalue: t.tool_id,\n\t\t\t\tleadingIcon:\n\t\t\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t\t\t});\n\t\t});\n\t\treturn order.map((src) => ({\n\t\t\tsource: src,\n\t\t\tlabel: toolSourceLabel(src),\n\t\t\toptions: bySource.get(src) ?? [],\n\t\t}));\n\t})();\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\tsourceGroups={toolSourceGroups}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"tertiaryGray\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","charLimits","AGENT_CHAR_LIMITS","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","renderSourceIcon","toolSourceGroups","order","bySource","src","toolSourceLabel","handleSave","result","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","COLORS","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"4oBA8DaA,GAA0D,CAAC,CACvE,QAAAC,EACA,OAAAC,EACA,eAAAC,EACA,UAAAC,GACA,MAAAC,EAAQ,mBACR,QAAAC,EACA,SAAAC,EAAW,WAAA,WACXC,EAAaC,GAAAA,iBACd,IAAM,CACL,KAAM,CAACC,EAAMC,CAAO,EAAIC,EAAAA,SAASN,GAAS,MAAQ,EAAE,EAC9C,CAACO,EAAcC,CAAe,EAAIF,EAAAA,SAASN,GAAS,cAAgB,EAAE,EACtE,CAACS,EAAWC,CAAY,EAAIJ,EAAAA,SAASN,GAAS,WAAa,EAAE,EAC7D,CAACW,EAAOC,CAAQ,EAAIN,EAAAA,SAAmBN,GAAS,OAAS,EAAE,EAC3D,CAACa,EAAQC,CAAS,EAAIR,EAAAA,SAAS,EAAK,EAEpC,CAACS,EAAUC,CAAW,EAAIV,EAAAA,SAAS,CAAC,EACpC,CAACW,EAAUC,CAAW,EAAIZ,EAAAA,SAAS,CAAC,EACpC,CAACa,GAAWC,EAAY,EAAId,EAAAA,SAEhC,IAAI,EAGAe,EAAeC,EAAAA,QACpB,IAAMC,yBAAuB1B,EAAgB,CAAA,EAAII,CAAQ,EACzD,CAACJ,EAAgBI,CAAQ,CAAA,EAKpBuB,EAAeC,EAAAA,OAEnB,EAAE,EACEC,EAAiBD,EAAAA,OAAqC,cAAc,EACpEE,EAAgBC,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,aAAeK,GAAM,MAC3C,EAAG,CAAA,CAAE,EACCC,EAAgBF,cAAaC,GAAwB,CAC1DL,EAAa,QAAQ,UAAYK,GAAM,MACxC,EAAG,CAAA,CAAE,EACCE,EAAaH,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,cAC1B,EAAG,CAAA,CAAE,EACCM,EAAaJ,EAAAA,YAAY,IAAM,CACpCF,EAAe,QAAU,WAC1B,EAAG,CAAA,CAAE,EACCO,EAAiBL,EAAAA,YACtB,CAACM,EAA2BC,IAAe,CACtCD,IAAS,QACZtB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CAExC,EACA,CAAA,CAAC,EAEIG,EAAqBV,cAAaO,GAAe,EAErDX,EAAa,QAAQE,EAAe,OAAO,GAC3CF,EAAa,QAAQ,gBACb,OAAQW,CAAE,CACpB,EAAG,CAAA,CAAE,EAGC,CAACI,EAAMC,CAAO,EAAIlC,EAAAA,SACvB,IAAA,EAEKmC,EAAkBhB,EAAAA,OAId,IAAI,EACRiB,EAAYjB,EAAAA,OAAO,CAAC,EAEpBkB,EAAcR,GAAe,CAClC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EAElDW,EAAQ,UAAUX,CAAE,KACpBY,EAASC,GAAiBA,EAAK,MAAMF,CAAK,EAAE,KAAK,EAAE,EACzDL,EAAgB,QAAU,CAAE,aAAAlC,EAAc,UAAAE,EAAW,MAAAE,CAAA,EACrDH,EAAiB4B,GAASW,EAAMX,CAAI,CAAC,EACrC1B,EAAc0B,GAASW,EAAMX,CAAI,CAAC,EAClCxB,EAAUwB,GAASA,EAAK,OAAQS,IAAMA,KAAMV,CAAE,CAAC,EAC/CnB,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBP,EAAU,SAAW,EACrBF,EAAQ,CACP,GAAIE,EAAU,QACd,QAAS,SAASE,GAAM,cAAgB,MAAM,WAAA,CAC9C,CACF,EAEMM,EAAa,IAAM,CACxB,MAAMC,EAAOV,EAAgB,QACzBU,IACH3C,EAAgB2C,EAAK,YAAY,EACjCzC,EAAayC,EAAK,SAAS,EAC3BvC,EAASuC,EAAK,KAAK,EACnBnC,EAAaiC,GAAMA,EAAI,CAAC,EACxB/B,EAAa+B,GAAMA,EAAI,CAAC,EACxBR,EAAgB,QAAU,MAE3BD,EAAQ,IAAI,CACb,EAEMY,EACLhD,EAAK,KAAA,EAAO,OAAS,IACpBG,EAAa,KAAA,EAAO,OAAS,GAAKE,EAAU,KAAA,EAAO,OAAS,GAExD4C,EAA8B1C,EAClC,IAAKwB,GAA8B,CACnC,MAAMS,EAAO/C,EAAe,KAAMgD,GAAMA,EAAE,UAAYV,CAAE,EACxD,OAAOS,EACJ,CACA,GAAAT,EACA,MAAOS,EAAK,aACZ,KAAMU,EAAAA,aAAaV,EAAK,QAAU,UAAU,CAAA,EAE5C,IACJ,CAAC,EACA,OAAQW,GAA2BA,IAAM,IAAI,EAIzCC,EAA8B3D,EAAe,IAAKgD,IAAO,CAC9D,MAAOA,EAAE,aACT,MAAOA,EAAE,QACT,YACCY,EAAAA,iBAAiBH,EAAAA,aAAaT,EAAE,QAAU,UAAU,CAAC,GAAK,MAAA,EAC1D,EAIIa,IAAmC,IAAM,CAC9C,MAAMC,EAAkB,CAAA,EAClBC,MAAe,IACrB,OAAA/D,EAAe,QAASgD,GAAM,CAC7B,MAAMgB,EAAMhB,EAAE,QAAU,WACnBe,EAAS,IAAIC,CAAG,IACpBD,EAAS,IAAIC,EAAK,EAAE,EACpBF,EAAM,KAAKE,CAAG,GAEfD,EAAS,IAAIC,CAAG,GAAG,KAAK,CACvB,MAAOhB,EAAE,aACT,MAAOA,EAAE,QACT,YACCY,EAAAA,iBAAiBH,EAAAA,aAAaT,EAAE,QAAU,UAAU,CAAC,GAAK,MAAA,CAC3D,CACF,CAAC,EACMc,EAAM,IAAKE,IAAS,CAC1B,OAAQA,EACR,MAAOC,EAAAA,gBAAgBD,CAAG,EAC1B,QAASD,EAAS,IAAIC,CAAG,GAAK,CAAA,CAAC,EAC9B,CACH,GAAA,EAEME,GAAa,SAAY,CAC9B,GAAI,CAACX,GAAWvC,EACf,OAED,MAAMmD,EAASpE,EAAO,CACrB,KAAMQ,EAAK,KAAA,EACX,aAAAG,EACA,UAAAE,EACA,MAAAE,CAAA,CACA,EACD,GAAIqD,GAAU,OAAQA,EAAyB,MAAS,WAAY,CACnElD,EAAU,EAAI,EACd,GAAI,CACH,MAAMkD,CACP,QAAA,CACClD,EAAU,EAAK,CAChB,CACD,CACD,EAsBA,OACCmD,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CAAc,QAASzE,EAAS,YAAU,iBAAiB,EAC5DsE,EAAAA,KAACI,EAAAA,cAAA,CAAc,YAAU,wBACxB,SAAA,CAAAJ,OAACK,EAAAA,oBAAA,CACA,SAAA,CAAAL,OAACM,EAAAA,wBAAA,CACA,SAAA,CAAAJ,MAACK,EAAAA,aAAA,CAAa,MAAOC,EAAAA,OAAO,QAAQ,QAAU,SAAA1E,EAAM,QACnD2E,EAAAA,cAAA,CAAc,MAAOD,EAAAA,OAAO,QAAQ,UAAW,SAAA,2FAAA,CAGhD,CAAA,EACD,EACAN,EAAAA,IAACQ,EAAAA,oBAAA,CAAoB,QAAShF,EAAS,aAAW,QACjD,SAAAwE,EAAAA,IAACS,GAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOH,EAAAA,OAAO,QAAQ,SAAA,CAAA,CACvB,CACD,CAAA,EACD,SAECI,EAAAA,kBAAA,CACA,SAAA,CAAAV,EAAAA,IAACW,GAAAA,MAAA,CACA,YAAU,gBACV,UAAU,aACV,cAAa,GACb,YAAY,mBACZ,MAAO1E,EACP,aAAcF,EAAW,KACzB,qBAAqB,MACrB,aAAc,CAAE,SAAU,GAAI,WAAY,MAAA,EAC1C,aAAcG,CAAA,CAAA,EAGf8D,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,wBACV,MAAM,eACN,MAAOxE,EACP,SAAUC,EACV,UAAWN,EAAW,aACtB,YAAY,gEACZ,UAAU,QACV,SAAU,SAASa,CAAQ,GAC3B,aAAAM,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASF,EACT,eAAgBJ,CAAA,CAAA,EAGjBwC,EAAAA,IAACY,EAAAA,cAAA,CACA,YAAU,qBACV,MAAM,aACN,MAAOtE,EACP,SAAUC,EACV,UAAWR,EAAW,UACtB,YAAY,qEACZ,UAAU,QACV,SAAU,SAASe,CAAQ,GAC3B,aAAAI,EACA,MAAOxB,EACP,gBAAiBoC,EACjB,QAASD,EACT,eAAgBF,CAAA,CAAA,EAGjBqC,EAAAA,IAACa,GAAAA,sBAAA,CACA,MAAM,2BACN,eAAe,iBACf,MAAO3B,EACP,eAAgBG,EAChB,aAAcE,GACd,aAAArC,EACA,UAAU,sBACV,MAAQc,GAAO,CACdG,EAAmBH,CAAE,EACrBvB,EAAUwB,GAASC,EAAAA,UAAUD,EAAMD,CAAE,CAAC,CACvC,EACA,SAAUQ,CAAA,CAAA,CACX,EACD,SAECsC,EAAAA,oBAAA,CACA,SAAA,CAAAd,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,gBACV,WAAW,UACX,KAAK,QACL,WAAW,OACX,SAAU,CAAC9B,EACX,UAAWvC,EACX,QAASkD,EAAA,CAAA,EAEVI,EAAAA,IAACe,EAAAA,OAAA,CACA,YAAU,kBACV,WAAW,eACX,KAAK,QACL,WAAW,SACX,QAASvF,CAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAEC4C,GACA4B,EAAAA,IAACgB,GAAAA,QAAA,CAEA,KAAM5C,EAAK,QACX,KAAK,OACL,SAAS,YACT,UAAW,IACX,gBAAe,GACf,YAAa,CACZ,WAAY,OACZ,WAAY,GACZ,cAAe,KACdW,EAAA,EACO,CAAA,EACR,EAED,aAAc,IAAMV,EAAQ,IAAI,CAAA,EAd3BD,EAAK,EAAA,CAeX,EAEF,CAEF"}
+{"version":3,"file":"CreateSubAgentPanel.js","sources":["../../../../../src/components/agent-builder/components/CreateSubAgentPanel.tsx"],"sourcesContent":["import CrossIcon from '@src/assets/icons/cross.svg';\nimport React, { useCallback, useMemo, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { Button } from '@src/components/button';\nimport { SingleOption } from '@src/components/dropdown/type';\nimport { Input } from '@src/components/input';\nimport { Toaster } from '@src/components/toaster';\nimport { BodySecondary, TitleRegular } from '@src/components/TypographyStyle';\nimport { addUnique } from '@src/utils/arrayUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport { AgentTool, SubAgentDraft } from '../AgentBuilder.model';\nimport {\n\tSubAgentCloseButton,\n\tSubAgentPanel,\n\tSubAgentPanelBody,\n\tSubAgentPanelFooter,\n\tSubAgentPanelHeader,\n\tSubAgentPanelHeaderText,\n\tSubAgentScrim,\n} from '../AgentBuilder.styled';\nimport { AGENT_CHAR_LIMITS } from '../constants/charLimits';\nimport type { AgentCharLimits } from '../constants/charLimits';\nimport {\n\tbuildAgentMentionItems,\n\ttoolSourceLabel,\n} from '../utils/mentionSerialization';\nimport { renderSourceIcon, SOURCE_ICONS } from '../utils/sourceIcons';\nimport { MentionEditor } from './MentionEditor';\nimport {\n\tSelectableItem,\n\tSelectableListSection,\n\tSourceGroup,\n} from './SelectableListSection';\n\nconst ImproveButton = styled.button`\n\talign-self: flex-start;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tcolor: ${COLORS.content.primary};\n\tbackground: ${COLORS.surface.standard};\n\tborder-radius: 8px;\n\tpadding: 6px 12px;\n\tfont-size: 13px;\n\tline-height: 1.1;\n\tfont-weight: 600;\n\tcursor: pointer;\n\n\t&:disabled {\n\t\tcursor: default;\n\t\topacity: 0.6;\n\t}\n`;\n\ntype InsertFn = (kind: 'tool' | 'subagent', id: string, label?: string) => void;\n\ninterface CreateSubAgentPanelProps {\n\tonClose: () => void;\n\t/** Persist the draft. The drawer shows a loader while the returned promise is pending. */\n\tonSave: (draft: SubAgentDraft) => void | Promise<void>;\n\tavailableTools: AgentTool[];\n\t/** Optional \"Improve with AI\" for instructions / guardrails. Omit to hide the buttons. */\n\tonImprove?: (\n\t\tkind: 'instructions' | 'guardrail',\n\t\ttext: string,\n\t) => Promise<string>;\n\t/** Header title — \"Create sub-agent\" (default) or \"Edit sub-agent\". */\n\ttitle?: string;\n\t/** Initial values, e.g. when configuring an existing sub-agent. */\n\tinitial?: SubAgentDraft;\n\t/** Tool-source fallback label for chips (host app). */\n\tappLabel?: string;\n\t/** Resolved character limits (defaults to {@link AGENT_CHAR_LIMITS}). */\n\tcharLimits?: AgentCharLimits;\n}\n\n/**\n * Right-side drawer for creating / editing a sub-agent (name, instructions,\n * guardrails, tools). Instructions & Guardrails are `@`-mention editors (tools\n * only — sub-agents can't nest); adding a tool from the list inserts it at the\n * last-focused field's cursor. Mount it fresh per open (key it) so `initial`\n * seeds the draft.\n */\nexport const CreateSubAgentPanel: React.FC<CreateSubAgentPanelProps> = ({\n\tonClose,\n\tonSave,\n\tavailableTools,\n\tonImprove,\n\ttitle = 'Create sub-agent',\n\tinitial,\n\tappLabel = 'Manifest',\n\tcharLimits = AGENT_CHAR_LIMITS,\n}) => {\n\tconst [name, setName] = useState(initial?.name ?? '');\n\tconst [instructions, setInstructions] = useState(initial?.instructions ?? '');\n\tconst [guardrail, setGuardrail] = useState(initial?.guardrail ?? '');\n\tconst [tools, setTools] = useState<string[]>(initial?.tools ?? []);\n\tconst [saving, setSaving] = useState(false);\n\t// Bumped to remount a field after its text is replaced (e.g. by Improve).\n\tconst [instrKey, setInstrKey] = useState(0);\n\tconst [guardKey, setGuardKey] = useState(0);\n\tconst [improving, setImproving] = useState<\n\t\t'instructions' | 'guardrail' | null\n\t>(null);\n\n\t// Tools-only mention list (sub-agents can't reference other sub-agents).\n\tconst mentionItems = useMemo(\n\t\t() => buildAgentMentionItems(availableTools, [], appLabel),\n\t\t[availableTools, appLabel],\n\t);\n\n\t// Per-field insert + focus registry, so the Tools list inserts a chip into the\n\t// last-focused editor at its cursor.\n\tconst insertersRef = useRef<\n\t\tPartial<Record<'instructions' | 'guardrail', InsertFn>>\n\t>({});\n\tconst lastFocusedRef = useRef<'instructions' | 'guardrail'>('instructions');\n\tconst registerInstr = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.instructions = fn ?? undefined;\n\t}, []);\n\tconst registerGuard = useCallback((fn: InsertFn | null) => {\n\t\tinsertersRef.current.guardrail = fn ?? undefined;\n\t}, []);\n\tconst focusInstr = useCallback(() => {\n\t\tlastFocusedRef.current = 'instructions';\n\t}, []);\n\tconst focusGuard = useCallback(() => {\n\t\tlastFocusedRef.current = 'guardrail';\n\t}, []);\n\tconst addToolMention = useCallback(\n\t\t(kind: 'tool' | 'subagent', id: string) => {\n\t\t\tif (kind === 'tool') {\n\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t}\n\t\t},\n\t\t[],\n\t);\n\tconst insertToolAtCursor = useCallback((id: string) => {\n\t\tconst target =\n\t\t\tinsertersRef.current[lastFocusedRef.current] ??\n\t\t\tinsertersRef.current.instructions;\n\t\ttarget?.('tool', id);\n\t}, []);\n\n\t// Local undo toast for tool removal (drawer state isn't in AgentValue).\n\tconst [undo, setUndo] = useState<{ id: number; message: string } | null>(\n\t\tnull,\n\t);\n\tconst undoSnapshotRef = useRef<{\n\t\tinstructions: string;\n\t\tguardrail: string;\n\t\ttools: string[];\n\t} | null>(null);\n\tconst undoIdRef = useRef(0);\n\n\tconst removeTool = (id: string) => {\n\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t// The token stores the tool id (a tool's id is its tool_id).\n\t\tconst token = `{{tool:${id}}}`;\n\t\tconst strip = (text: string) => text.split(token).join('');\n\t\tundoSnapshotRef.current = { instructions, guardrail, tools };\n\t\tsetInstructions((prev) => strip(prev));\n\t\tsetGuardrail((prev) => strip(prev));\n\t\tsetTools((prev) => prev.filter((t) => t !== id));\n\t\tsetInstrKey((k) => k + 1);\n\t\tsetGuardKey((k) => k + 1);\n\t\tundoIdRef.current += 1;\n\t\tsetUndo({\n\t\t\tid: undoIdRef.current,\n\t\t\tmessage: `Tool \"${tool?.display_name ?? 'Tool'}\" removed`,\n\t\t});\n\t};\n\n\tconst undoRemove = () => {\n\t\tconst snap = undoSnapshotRef.current;\n\t\tif (snap) {\n\t\t\tsetInstructions(snap.instructions);\n\t\t\tsetGuardrail(snap.guardrail);\n\t\t\tsetTools(snap.tools);\n\t\t\tsetInstrKey((k) => k + 1);\n\t\t\tsetGuardKey((k) => k + 1);\n\t\t\tundoSnapshotRef.current = null;\n\t\t}\n\t\tsetUndo(null);\n\t};\n\n\tconst canSave =\n\t\tname.trim().length > 0 &&\n\t\t(instructions.trim().length > 0 || guardrail.trim().length > 0);\n\n\tconst toolItems: SelectableItem[] = tools\n\t\t.map((id): SelectableItem | null => {\n\t\t\tconst tool = availableTools.find((t) => t.tool_id === id);\n\t\t\treturn tool\n\t\t\t\t? {\n\t\t\t\t\t\tid,\n\t\t\t\t\t\tlabel: tool.display_name,\n\t\t\t\t\t\ticon: SOURCE_ICONS[tool.source ?? 'manifest'],\n\t\t\t\t  }\n\t\t\t\t: null;\n\t\t})\n\t\t.filter((x): x is SelectableItem => x !== null);\n\n\t// Offer all tools (re-add allowed); the chip list stays deduped. Icon left of\n\t// the name, no description.\n\tconst toolOptions: SingleOption[] = availableTools.map((t) => ({\n\t\tlabel: t.display_name,\n\t\tvalue: t.tool_id,\n\t\tleadingIcon:\n\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t}));\n\n\t// Group tools by source (Manifest / Shopify / …) so the empty state shows the\n\t// same per-source buttons as the main builder's side panel.\n\tconst toolSourceGroups: SourceGroup[] = (() => {\n\t\tconst order: string[] = [];\n\t\tconst bySource = new Map<string, SingleOption[]>();\n\t\tavailableTools.forEach((t) => {\n\t\t\tconst src = t.source ?? 'manifest';\n\t\t\tif (!bySource.has(src)) {\n\t\t\t\tbySource.set(src, []);\n\t\t\t\torder.push(src);\n\t\t\t}\n\t\t\tbySource.get(src)?.push({\n\t\t\t\tlabel: t.display_name,\n\t\t\t\tvalue: t.tool_id,\n\t\t\t\tleadingIcon:\n\t\t\t\t\trenderSourceIcon(SOURCE_ICONS[t.source ?? 'manifest']) ?? undefined,\n\t\t\t});\n\t\t});\n\t\treturn order.map((src) => ({\n\t\t\tsource: src,\n\t\t\tlabel: toolSourceLabel(src),\n\t\t\toptions: bySource.get(src) ?? [],\n\t\t}));\n\t})();\n\n\tconst handleSave = async () => {\n\t\tif (!canSave || saving) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = onSave({\n\t\t\tname: name.trim(),\n\t\t\tinstructions,\n\t\t\tguardrail,\n\t\t\ttools,\n\t\t});\n\t\tif (result && typeof (result as Promise<void>).then === 'function') {\n\t\t\tsetSaving(true);\n\t\t\ttry {\n\t\t\t\tawait result;\n\t\t\t} finally {\n\t\t\t\tsetSaving(false);\n\t\t\t}\n\t\t}\n\t};\n\n\tconst handleImprove = async (kind: 'instructions' | 'guardrail') => {\n\t\tif (!onImprove || improving) {\n\t\t\treturn;\n\t\t}\n\t\tsetImproving(kind);\n\t\ttry {\n\t\t\tconst current = kind === 'instructions' ? instructions : guardrail;\n\t\t\tconst improved = await onImprove(kind, current);\n\t\t\tif (kind === 'instructions') {\n\t\t\t\tsetInstructions(improved);\n\t\t\t\tsetInstrKey((k) => k + 1);\n\t\t\t} else {\n\t\t\t\tsetGuardrail(improved);\n\t\t\t\tsetGuardKey((k) => k + 1);\n\t\t\t}\n\t\t} finally {\n\t\t\tsetImproving(null);\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<SubAgentScrim onClick={onClose} data-test=\"subagent-scrim\" />\n\t\t\t<SubAgentPanel data-test=\"create-subagent-panel\">\n\t\t\t\t<SubAgentPanelHeader>\n\t\t\t\t\t<SubAgentPanelHeaderText>\n\t\t\t\t\t\t<TitleRegular color={COLORS.content.primary}>{title}</TitleRegular>\n\t\t\t\t\t\t<BodySecondary color={COLORS.content.secondary}>\n\t\t\t\t\t\t\tEach sub-agent handles one piece of the job. Use @ in the main\n\t\t\t\t\t\t\tinstructions to call them.\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</SubAgentPanelHeaderText>\n\t\t\t\t\t<SubAgentCloseButton onClick={onClose} aria-label=\"Close\">\n\t\t\t\t\t\t<CrossIcon\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.secondary}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</SubAgentCloseButton>\n\t\t\t\t</SubAgentPanelHeader>\n\n\t\t\t\t<SubAgentPanelBody>\n\t\t\t\t\t<Input\n\t\t\t\t\t\tdata-test=\"subagent-name\"\n\t\t\t\t\t\tlabelText=\"Agent name\"\n\t\t\t\t\t\tlabelTextBold\n\t\t\t\t\t\tplaceholder=\"Enter agent name\"\n\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\tmaxCharLimit={charLimits.name}\n\t\t\t\t\t\tmaxCharLimitPosition=\"TOP\"\n\t\t\t\t\t\tmaxCharStyle={{ fontSize: 12, lineHeight: '16px' }}\n\t\t\t\t\t\tonChangeText={setName}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-instructions\"\n\t\t\t\t\t\tlabel=\"Instructions\"\n\t\t\t\t\t\tvalue={instructions}\n\t\t\t\t\t\tonChange={setInstructions}\n\t\t\t\t\t\tmaxLength={charLimits.instructions}\n\t\t\t\t\t\tplaceholder=\"Write the steps in plain English. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`instr-${instrKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusInstr}\n\t\t\t\t\t\tregisterInsert={registerInstr}\n\t\t\t\t\t\taction={\n\t\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-instructions\"\n\t\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\t\tonClick={() => handleImprove('instructions')}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{improving === 'instructions'\n\t\t\t\t\t\t\t\t\t\t? 'Improving…'\n\t\t\t\t\t\t\t\t\t\t: 'Improve with AI'}\n\t\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<MentionEditor\n\t\t\t\t\t\tdata-test=\"subagent-guardrail\"\n\t\t\t\t\t\tlabel=\"Guardrails\"\n\t\t\t\t\t\tvalue={guardrail}\n\t\t\t\t\t\tonChange={setGuardrail}\n\t\t\t\t\t\tmaxLength={charLimits.guardrail}\n\t\t\t\t\t\tplaceholder=\"e.g. Never discuss competitor pricing. Type @ to reference a tool.\"\n\t\t\t\t\t\tminHeight=\"160px\"\n\t\t\t\t\t\tresetKey={`guard-${guardKey}`}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\ttools={availableTools}\n\t\t\t\t\t\tonMentionSelect={addToolMention}\n\t\t\t\t\t\tonFocus={focusGuard}\n\t\t\t\t\t\tregisterInsert={registerGuard}\n\t\t\t\t\t\taction={\n\t\t\t\t\t\t\tonImprove ? (\n\t\t\t\t\t\t\t\t<ImproveButton\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tdata-test=\"subagent-improve-guardrail\"\n\t\t\t\t\t\t\t\t\tdisabled={improving !== null}\n\t\t\t\t\t\t\t\t\tonClick={() => handleImprove('guardrail')}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{improving === 'guardrail' ? 'Improving…' : 'Improve with AI'}\n\t\t\t\t\t\t\t\t</ImproveButton>\n\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<SelectableListSection\n\t\t\t\t\t\ttitle=\"Tools this agent can use\"\n\t\t\t\t\t\tdataTestPrefix=\"subagent-tools\"\n\t\t\t\t\t\titems={toolItems}\n\t\t\t\t\t\taddableOptions={toolOptions}\n\t\t\t\t\t\tsourceGroups={toolSourceGroups}\n\t\t\t\t\t\tmentionItems={mentionItems}\n\t\t\t\t\t\temptyText=\"No tools added yet.\"\n\t\t\t\t\t\tonAdd={(id) => {\n\t\t\t\t\t\t\tinsertToolAtCursor(id);\n\t\t\t\t\t\t\tsetTools((prev) => addUnique(prev, id));\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tonRemove={removeTool}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelBody>\n\n\t\t\t\t<SubAgentPanelFooter>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-save\"\n\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\tdisabled={!canSave}\n\t\t\t\t\t\tisLoading={saving}\n\t\t\t\t\t\tonClick={handleSave}\n\t\t\t\t\t/>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tdata-test=\"subagent-cancel\"\n\t\t\t\t\t\tbuttonType=\"tertiaryGray\"\n\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\tbuttonText=\"Cancel\"\n\t\t\t\t\t\tonClick={onClose}\n\t\t\t\t\t/>\n\t\t\t\t</SubAgentPanelFooter>\n\t\t\t</SubAgentPanel>\n\n\t\t\t{undo && (\n\t\t\t\t<Toaster\n\t\t\t\t\tkey={undo.id}\n\t\t\t\t\ttext={undo.message}\n\t\t\t\t\ttype=\"info\"\n\t\t\t\t\tposition=\"top-right\"\n\t\t\t\t\tautoClose={5000}\n\t\t\t\t\thideCloseButton\n\t\t\t\t\tbuttonProps={{\n\t\t\t\t\t\tbuttonText: 'Undo',\n\t\t\t\t\t\tshowButton: true,\n\t\t\t\t\t\tonButtonClick: () => {\n\t\t\t\t\t\t\tundoRemove();\n\t\t\t\t\t\t\treturn {} as Record<string, never>;\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t\tonCloseToast={() => setUndo(null)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["ImproveButton","styled","COLORS","CreateSubAgentPanel","onClose","onSave","availableTools","onImprove","title","initial","appLabel","charLimits","AGENT_CHAR_LIMITS","name","setName","useState","instructions","setInstructions","guardrail","setGuardrail","tools","setTools","saving","setSaving","instrKey","setInstrKey","guardKey","setGuardKey","improving","setImproving","mentionItems","useMemo","buildAgentMentionItems","insertersRef","useRef","lastFocusedRef","registerInstr","useCallback","fn","registerGuard","focusInstr","focusGuard","addToolMention","kind","id","prev","addUnique","insertToolAtCursor","undo","setUndo","undoSnapshotRef","undoIdRef","removeTool","tool","t","token","strip","text","k","undoRemove","snap","canSave","toolItems","SOURCE_ICONS","x","toolOptions","renderSourceIcon","toolSourceGroups","order","bySource","src","toolSourceLabel","handleSave","result","handleImprove","improved","jsxs","Fragment","jsx","SubAgentScrim","SubAgentPanel","SubAgentPanelHeader","SubAgentPanelHeaderText","TitleRegular","BodySecondary","SubAgentCloseButton","CrossIcon","SubAgentPanelBody","Input","MentionEditor","SelectableListSection","SubAgentPanelFooter","Button","Toaster"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { HorizontalGraphI } from './HorizontalGraph.d';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t  }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label || '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}
+{"version":3,"file":"HorizontalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/HorizontalBarGraph/HorizontalGraph.tsx"],"sourcesContent":["import {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { TitleRegular } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport {\n\ttruncateValueForIndianStore,\n\ttruncateValueForInternationalStore,\n} from '../utils/calcPercentage';\nimport { GraphContainerWrapper } from './HorizontalGraph.styles';\nimport { HorizontalGraphI } from './HorizontalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const HorizontalGraph: React.FC<HorizontalGraphI> = (props) => {\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\n\t// Check if data is present - consider both regular xAxis data and stacked datasets\n\tconst hasStackedData =\n\t\tprops.stacked &&\n\t\tprops.stackedDatasets &&\n\t\tprops.stackedDatasets.length > 0 &&\n\t\tprops.stackedDatasets.some((ds) => ds.data.some((val) => val !== 0));\n\n\tconst hasXAxisData = props.xAxis.data.findIndex((ele) => ele !== 0) !== -1;\n\n\tconst noDataPresent = !hasStackedData && !hasXAxisData;\n\tconst xAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: props.xAxis.stepSize ?? 200,\n\t};\n\tconst options = {\n\t\tindexAxis: 'y' as const,\n\t\telements: {},\n\t\tresponsive: true,\n\t\tmaintainAspectRatio: props.maintainAspectRatio,\n\t\tlayout: {\n\t\t\tpadding: {\n\t\t\t\tright: props.showTotal ? 50 : 0,\n\t\t\t},\n\t\t},\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.xAxis.toolTipCallback,\n\t\t\t\t\tfooter: props.tooltipConfig?.footerCallback,\n\t\t\t\t},\n\t\t\t\tfooterFont: props.tooltipConfig?.footerStyles?.footerFont,\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: (!noDataPresent && props.showTotal) ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tformatter: (_, context) => {\n\t\t\t\t\tconst datasetIndex = context.datasetIndex;\n\t\t\t\t\tconst datasets = context.chart.data.datasets;\n\t\t\t\t\tif (datasetIndex !== datasets.length - 1) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\tconst dataIndex = context.dataIndex;\n\t\t\t\t\tlet sum = 0;\n\t\t\t\t\tfor (let i = 0; i < datasets.length; i++) {\n\t\t\t\t\t\tsum += datasets[i].data[dataIndex] ?? 0;\n\t\t\t\t\t}\n\t\t\t\t\tif (!sum) {\n\t\t\t\t\t\treturn '';\n\t\t\t\t\t}\n\t\t\t\t\treturn props.isInternationalStore\n\t\t\t\t\t\t? truncateValueForInternationalStore(sum)\n\t\t\t\t\t\t: truncateValueForIndianStore(sum);\n\t\t\t\t},\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\ty: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize, color: props.yAxis.titleColor },\n\t\t\t\t\tpadding: { bottom: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\tx: {\n\t\t\t\tstacked: props.stacked ?? false,\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t\tpadding: { top: 10 },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.xAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent\n\t\t\t\t\t\t? xAxisConfigForNoData\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmax: props.xAxis.max,\n\t\t\t\t\t\t\t\tstepSize: props.xAxis.stepSize,\n\t\t\t\t\t\t  }),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tonClick: (_event: any, elements: any[]) => {\n\t\t\tif (elements.length > 0 && props.onBarClick) {\n\t\t\t\tconst index = elements[0].index;\n\t\t\t\tprops.onBarClick(index);\n\t\t\t}\n\t\t},\n\t} as any;\n\n\tconst getColorSpectrum = (context) => {\n\t\tconst ctx = context.chart.ctx;\n\t\tconst gradient = ctx.createLinearGradient(0, 0, 0, 200);\n\t\tlet rgbaColor = '';\n\t\tif (noDataPresent) {\n\t\t\trgbaColor = 'rgba(0,0,0,0)';\n\t\t} else if (props.barColorRGBA) {\n\t\t\tconst rgb = props.barColorRGBA;\n\t\t\trgbaColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${rgb.a ?? '0.3'})`;\n\t\t}\n\n\t\tgradient.addColorStop(0, rgbaColor ? rgbaColor : 'rgba(146, 96, 237, 0.3)');\n\t\tgradient.addColorStop(1, rgbaColor ? rgbaColor : `rgba(146, 96, 237, 0.3)`);\n\n\t\treturn gradient;\n\t};\n\n\t// Get background color - supports per-bar colors via barColors array\n\tconst getBackgroundColor = () => {\n\t\tif (noDataPresent) {\n\t\t\treturn 'rgba(0,0,0,0)';\n\t\t}\n\t\t// If barColors array is provided, use it for per-bar coloring\n\t\tif (props.barColors && props.barColors.length > 0) {\n\t\t\treturn props.barColors;\n\t\t}\n\t\t// Fallback to single color via getColorSpectrum\n\t\treturn (context) => getColorSpectrum(context);\n\t};\n\n\t// Build datasets - support stacked datasets if provided\n\tconst buildDatasets = () => {\n\t\tif (\n\t\t\tprops.stacked &&\n\t\t\tprops.stackedDatasets &&\n\t\t\tprops.stackedDatasets.length > 0\n\t\t) {\n\t\t\treturn props.stackedDatasets.map((dataset) => ({\n\t\t\t\tlabel: dataset.label || '',\n\t\t\t\tdata: noDataPresent ? dummyValues : dataset.data,\n\t\t\t\tbackgroundColor: dataset.backgroundColor,\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t}));\n\t\t}\n\t\t// Default single dataset\n\t\treturn [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.xAxis.data,\n\t\t\t\tbackgroundColor: getBackgroundColor(),\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t];\n\t};\n\n\tconst data = {\n\t\tlabels: props.yAxis.data.map((d) => d.toString()),\n\t\tdatasets: buildDatasets(),\n\t};\n\treturn (\n\t\t<GraphContainerWrapper\n\t\t\tpadding={props.outerPadding}\n\t\t\tskipOuterLayout={props.skipOuterLayout}\n\t\t>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<TitleRegular\n\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t>\n\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t</TitleRegular>\n\t\t\t)}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.maintainAspectRatio\n\t\t\t\t\t\t? undefined\n\t\t\t\t\t\t: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","HorizontalGraph","props","dummyValues","hasStackedData","ds","val","hasXAxisData","ele","noDataPresent","xAxisConfigForNoData","options","_","context","datasetIndex","datasets","dataIndex","sum","i","truncateValueForInternationalStore","truncateValueForIndianStore","COLORS","FONTS","_event","elements","index","getColorSpectrum","gradient","rgbaColor","rgb","getBackgroundColor","buildDatasets","dataset","data","d","jsxs","GraphContainerWrapper","jsx","TitleRegular","Bar"],"mappings":"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"}

package/dist/cjs/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.tsx"],"sourcesContent":["import BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport PieChartIcon from '@src/assets/icons/ChartPie.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tColor,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React, { Suspense, useEffect } from 'react';\nimport { useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { VerticalGraphI } from './VerticalGraph.d';\nimport { GraphContainerWrapper } from './VerticalGraph.styles';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const VerticalGraph: React.FC<VerticalGraphI> = (props) => {\n\tconst { PieChartComponent: PieChartAnalytics } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showPieChart, setShowPieChart] = useState(false);\n\tconst [pieChartData, setPieChartData] = useState<\n\t\t{\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[]\n\t>();\n\n\tuseEffect(() => {\n\t\tconst dataForPieChart: {\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[] = [];\n\t\tif (!showPieChart) {\n\t\t\treturn;\n\t\t}\n\t\tprops.popupData?.xAxis.data.forEach((ele, index) => {\n\t\t\tdataForPieChart.push({\n\t\t\t\tname: ele.toString(),\n\t\t\t\tcount: Number(props.popupData?.yAxis.data[index]) || 0,\n\t\t\t});\n\t\t});\n\t\tsetPieChartData(dataForPieChart);\n\t}, [showPieChart, props.popupData?.xAxis.data, props.popupData?.yAxis.data]);\n\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst noDataPresentInPopup =\n\t\tprops.popupData?.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\tconst options = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\tconst optionsForPopup = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresentInPopup,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.xAxis.title,\n\t\t\t\t\ttext: props.popupData?.xAxis.title,\n\t\t\t\t\tcolor: props.popupData?.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.yAxis.title,\n\t\t\t\t\ttext: props.popupData?.yAxis.title,\n\t\t\t\t\tcolor: props.popupData?.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.popupData?.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresentInPopup ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\n\tconst data = {\n\t\tlabels: props.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.xAxis.data.length;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\tconst dataForPopup = {\n\t\tlabels: props.popupData?.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresentInPopup ? dummyValues : props.popupData?.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.popupData?.xAxis.data.length || 0;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper padding={props.outerPadding}>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div style={{ display: 'flex', justifyContent: 'flex-end' }}>\n\t\t\t\t{props.showConvertToPieChart && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowPopup(false);\n\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t}}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.popupData?.chartHeading}\n\t\t\t\t\twidth=\"75%\"\n\t\t\t\t\theaderRightCustomElement={\n\t\t\t\t\t\tprops.showConvertToPieChart ? (\n\t\t\t\t\t\t\t!showPieChart ? (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(true);\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) : (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(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)\n\t\t\t\t\t\t) : null\n\t\t\t\t\t}\n\t\t\t\t\theaderLeftCustomElement={props.popupData?.headerLeftCustomElement}\n\t\t\t\t>\n\t\t\t\t\t{showPieChart && pieChartData && PieChartAnalytics && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t\t<PieChartAnalytics\n\t\t\t\t\t\t\t\t\tslices={pieChartData}\n\t\t\t\t\t\t\t\t\tsize={props.pieChartSize}\n\t\t\t\t\t\t\t\t\thideTitle={true}\n\t\t\t\t\t\t\t\t\tcurrencyProps={props.currencyProps}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!showPieChart && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={optionsForPopup} data={dataForPopup} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","VerticalGraph","props","PieChartAnalytics","showPopup","setShowPopup","useState","showPieChart","setShowPieChart","pieChartData","setPieChartData","useEffect","dataForPieChart","ele","index","dummyValues","noDataPresent","noDataPresentInPopup","yAxisConfigForNoData","options","COLORS","FONTS","optionsForPopup","data","d","context","rgba","gradientColorSet","dataSetLen","counter","rgb","i","rgbaColor","dataForPopup","jsxs","GraphContainerWrapper","jsx","TitleMedium","IconButton","PieChartIcon","MaximizeIcon","Bar","StyledModal","BarChartIcon","Suspense"],"mappings":"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"}
+{"version":3,"file":"VerticalGraph.js","sources":["../../../../../../src/components/analytics-chips-and-dropdowns/chart/VerticalBarGraph/VerticalGraph.tsx"],"sourcesContent":["import BarChartIcon from '@src/assets/icons/ChartBar.svg';\nimport PieChartIcon from '@src/assets/icons/ChartPie.svg';\nimport MaximizeIcon from '@src/assets/icons/maximize.svg';\nimport {\n\tBarElement,\n\tCategoryScale,\n\tChart as ChartJS,\n\tColor,\n\tLinearScale,\n\tTooltip,\n} from 'chart.js';\nimport ChartDataLabels from 'chartjs-plugin-datalabels';\nimport React, { Suspense, useEffect } from 'react';\nimport { useState } from 'react';\nimport { Bar } from 'react-chartjs-2';\nimport { IconButton } from '@src/components/icon-button';\nimport { StyledModal } from '@src/components/modals';\nimport { TitleMedium } from '@src/components/TypographyStyle';\nimport { COLORS, FONTS } from '@src/constants/Theme';\nimport { GraphContainerWrapper } from './VerticalGraph.styles';\nimport { VerticalGraphI } from './VerticalGraph.type';\n\nChartJS.register(\n\tCategoryScale,\n\tLinearScale,\n\tBarElement,\n\tTooltip,\n\tChartDataLabels,\n);\n\nexport const VerticalGraph: React.FC<VerticalGraphI> = (props) => {\n\tconst { PieChartComponent: PieChartAnalytics } = props;\n\tconst [showPopup, setShowPopup] = useState(false);\n\tconst [showPieChart, setShowPieChart] = useState(false);\n\tconst [pieChartData, setPieChartData] = useState<\n\t\t{\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[]\n\t>();\n\n\tuseEffect(() => {\n\t\tconst dataForPieChart: {\n\t\t\tname: string;\n\t\t\tcount: number;\n\t\t}[] = [];\n\t\tif (!showPieChart) {\n\t\t\treturn;\n\t\t}\n\t\tprops.popupData?.xAxis.data.forEach((ele, index) => {\n\t\t\tdataForPieChart.push({\n\t\t\t\tname: ele.toString(),\n\t\t\t\tcount: Number(props.popupData?.yAxis.data[index]) || 0,\n\t\t\t});\n\t\t});\n\t\tsetPieChartData(dataForPieChart);\n\t}, [showPieChart, props.popupData?.xAxis.data, props.popupData?.yAxis.data]);\n\n\tconst dummyValues = [250, 1000, 800, 1500, 300, 600];\n\tconst noDataPresent = props.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst noDataPresentInPopup =\n\t\tprops.popupData?.yAxis.data.findIndex((ele) => ele !== 0) === -1;\n\tconst yAxisConfigForNoData = {\n\t\tmin: 0,\n\t\tmax: 2000,\n\t\tstepSize: 200,\n\t};\n\tconst options = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresent,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.xAxis.title,\n\t\t\t\t\ttext: props.xAxis.title,\n\t\t\t\t\tcolor: props.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.yAxis.title,\n\t\t\t\t\ttext: props.yAxis.title,\n\t\t\t\t\tcolor: props.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresent ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\tconst optionsForPopup = {\n\t\tresponsive: true,\n\t\tplugins: {\n\t\t\tlegend: {\n\t\t\t\tdisplay: false,\n\t\t\t},\n\t\t\ttooltip: {\n\t\t\t\tenabled: !noDataPresentInPopup,\n\t\t\t\tcallbacks: {\n\t\t\t\t\tlabel: props.yAxis.toolTipCallback,\n\t\t\t\t},\n\t\t\t},\n\t\t\tdatalabels: {\n\t\t\t\tdisplay: props.showTotal ?? false,\n\t\t\t\tanchor: 'end' as const,\n\t\t\t\talign: 'end' as const,\n\t\t\t\tclamp: true,\n\t\t\t\tcolor: COLORS.content.secondary,\n\t\t\t},\n\t\t},\n\t\tscales: {\n\t\t\tx: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.xAxis.title,\n\t\t\t\t\ttext: props.popupData?.xAxis.title,\n\t\t\t\t\tcolor: props.popupData?.xAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tborderColor: COLORS.background.base,\n\t\t\t\t},\n\n\t\t\t\tticks: {\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.yAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t},\n\t\t\t},\n\n\t\t\ty: {\n\t\t\t\ttitle: {\n\t\t\t\t\tdisplay: !!props.popupData?.yAxis.title,\n\t\t\t\t\ttext: props.popupData?.yAxis.title,\n\t\t\t\t\tcolor: props.popupData?.yAxis.titleColor,\n\t\t\t\t\tfont: { size: FONTS.caption.fontSize },\n\t\t\t\t},\n\t\t\t\tgrid: {\n\t\t\t\t\tborderColor: 'white',\n\t\t\t\t\tcolor: COLORS.background.base,\n\t\t\t\t},\n\t\t\t\tticks: {\n\t\t\t\t\tcallback: props.popupData?.yAxis.ticksCallback,\n\t\t\t\t\tfontSize: FONTS.caption.fontSize,\n\t\t\t\t\tcolor: props.popupData?.xAxis.labelColor ?? COLORS.content.secondary,\n\t\t\t\t\t...(noDataPresentInPopup ? yAxisConfigForNoData : {}),\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tmaintainAspectRatio: false,\n\t} as any;\n\n\tconst data = {\n\t\tlabels: props.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresent ? dummyValues : props.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.xAxis.data.length;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\tconst dataForPopup = {\n\t\tlabels: props.popupData?.xAxis.data.map((d) => d.toString()),\n\t\tdatasets: [\n\t\t\t{\n\t\t\t\tdata: noDataPresentInPopup ? dummyValues : props.popupData?.yAxis.data,\n\t\t\t\tbackgroundColor: (context) => {\n\t\t\t\t\tconst rgba = props.barColorRGBA;\n\n\t\t\t\t\tlet gradientColorSet: string[] = [];\n\t\t\t\t\tconst dataSetLen = props.popupData?.xAxis.data.length || 0;\n\n\t\t\t\t\tif (noDataPresent) {\n\t\t\t\t\t\treturn 'rgba(0,0,0,0)';\n\t\t\t\t\t} else {\n\t\t\t\t\t\tif (props.isFunnel) {\n\t\t\t\t\t\t\tconst stepSize =\n\t\t\t\t\t\t\t\tdataSetLen > 10 ? 0.1 : (1 / dataSetLen).toFixed(2);\n\t\t\t\t\t\t\tlet counter = +stepSize;\n\t\t\t\t\t\t\tconst rgb = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}`;\n\t\t\t\t\t\t\tfor (let i = 1; i < dataSetLen + 1; i++) {\n\t\t\t\t\t\t\t\tlet rgba = '';\n\t\t\t\t\t\t\t\tif (i > 10) {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},1)`;\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\trgba = `${rgb},${counter})`;\n\t\t\t\t\t\t\t\t\tcounter = counter + 0.1;\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tgradientColorSet.push(rgba);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\tconst rgbaColor = `rgba(${rgba.r}, ${rgba.g}, ${rgba.b}, ${\n\t\t\t\t\t\t\t\trgba.a ?? '1'\n\t\t\t\t\t\t\t})`;\n\n\t\t\t\t\t\t\tgradientColorSet = Array(dataSetLen).fill(rgbaColor);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn gradientColorSet as unknown as Color;\n\t\t\t\t},\n\t\t\t\tbarPercentage: 0.4,\n\t\t\t\tcategoryPercentage: 1,\n\t\t\t\tborderRadius: 4,\n\t\t\t},\n\t\t],\n\t};\n\n\treturn (\n\t\t<GraphContainerWrapper padding={props.outerPadding}>\n\t\t\t{props.chartHeading && (\n\t\t\t\t<div style={{ marginBottom: 24 }}>\n\t\t\t\t\t<TitleMedium\n\t\t\t\t\t\tcolor={props.chartHeading.color ?? COLORS.content.secondary}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.chartHeading.heading}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div style={{ display: 'flex', justifyContent: 'flex-end' }}>\n\t\t\t\t{props.showConvertToPieChart && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPieChart(true);\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{props.allowChartPopup && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={MaximizeIcon}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tsetShowPopup(true);\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Bar options={options} data={data} />\n\t\t\t</div>\n\t\t\t{showPopup && (\n\t\t\t\t<StyledModal\n\t\t\t\t\topen={showPopup}\n\t\t\t\t\tonClose={() => {\n\t\t\t\t\t\tsetShowPopup(false);\n\t\t\t\t\t\tsetShowPieChart(false);\n\t\t\t\t\t}}\n\t\t\t\t\tcloseOnOutsideClick\n\t\t\t\t\theadingTitle={props.popupData?.chartHeading}\n\t\t\t\t\twidth=\"75%\"\n\t\t\t\t\theaderRightCustomElement={\n\t\t\t\t\t\tprops.showConvertToPieChart ? (\n\t\t\t\t\t\t\t!showPieChart ? (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={PieChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(true);\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) : (\n\t\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\t\tIcon={BarChartIcon}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\tsetShowPieChart(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)\n\t\t\t\t\t\t) : null\n\t\t\t\t\t}\n\t\t\t\t\theaderLeftCustomElement={props.popupData?.headerLeftCustomElement}\n\t\t\t\t>\n\t\t\t\t\t{showPieChart && pieChartData && PieChartAnalytics && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t\tpadding: '24px',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Suspense fallback={<div>Loading...</div>}>\n\t\t\t\t\t\t\t\t<PieChartAnalytics\n\t\t\t\t\t\t\t\t\tslices={pieChartData}\n\t\t\t\t\t\t\t\t\tsize={props.pieChartSize}\n\t\t\t\t\t\t\t\t\thideTitle={true}\n\t\t\t\t\t\t\t\t\tcurrencyProps={props.currencyProps}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Suspense>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{!showPieChart && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\theight: props.graphCanvasHeight ?? 500,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Bar options={optionsForPopup} data={dataForPopup} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</StyledModal>\n\t\t\t)}\n\t\t</GraphContainerWrapper>\n\t);\n};\n"],"names":["ChartJS","CategoryScale","LinearScale","BarElement","Tooltip","ChartDataLabels","VerticalGraph","props","PieChartAnalytics","showPopup","setShowPopup","useState","showPieChart","setShowPieChart","pieChartData","setPieChartData","useEffect","dataForPieChart","ele","index","dummyValues","noDataPresent","noDataPresentInPopup","yAxisConfigForNoData","options","COLORS","FONTS","optionsForPopup","data","d","context","rgba","gradientColorSet","dataSetLen","counter","rgb","i","rgbaColor","dataForPopup","jsxs","GraphContainerWrapper","jsx","TitleMedium","IconButton","PieChartIcon","MaximizeIcon","Bar","StyledModal","BarChartIcon","Suspense"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"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;
+"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;
 //# sourceMappingURL=Avatar.js.map