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

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (131) hide show

package/dist/cjs/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t&:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\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\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t&:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). /\nexport type WhatsAppEditorRightSlotProps = {\n\t/\n\t True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t\| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t\| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions \|\| action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions \|\| action.disabled \|\| action.loading\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted \|\| !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled \|\| action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","jsx","Fragment","_module","getIconColor","isActive","COLORS","Container","styled","CustomRightBorder","ButtonHolder","props","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","AIButton","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","_ref","emojiPickerRef","useRef","active","setActive","useState","closeEmojiPicker","useCallback","prev","useOutside","useEffect","handleClick","e","type","jsxs","Tooltip","EmojiIcon","data","BoldIcon","ItalicIcon","StrikeThroughIcon","action","AIRephraseButton","toneId"],"mappings":"wgCAYA,IAAIA,EAAmB,IAAMC,EAAAA,IAAAC,EAAAA,SAAA,EAAE,EAC3B,OAAO,OAAW,KACrB,OAAO,oBAAoB,EAAE,KAAMC,GAAY,CAC9CH,EAAcG,EAAQ,OACvB,CAAC,EAGF,MAAMC,EAAgBC,GACjBA,EAAiBC,SAAO,WAAW,aAChCA,EAAAA,OAAO,QAAQ,YAGjBC,EAAYC,EAAAA,QAAO;AAAA,eACVF,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASzBG,EAAoBD,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMlCE,EAAeF,EAAAA,QAAO;AAAA;AAAA,eAEZG,GACdA,EAAM,OAASL,EAAAA,OAAO,WAAW,SAAW,aAAa;AAAA;AAAA,WAE/CK,GAAWA,EAAM,SAAW,cAAgB,SAAU;AAAA,YACrDA,GAAWA,EAAM,SAAW,IAAO,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQ5CC,EAA2BJ,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQlCK,EAAiBL,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAMxBM,EAAqBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5BO,EAAgBP,EAAAA,QAAO;AAAA;AAAA;AAAA,qBAGRF,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,YAE7BK,GAAWA,EAAM,SAAW,GAAM,CAAE;AAAA,EAG3CK,GAAWR,EAAAA,QAAO;AAAA;AAAA,eAERG,GACdA,EAAM,YAAc,UAAYL,EAAAA,OAAO,QAAQ,QAAQ;AAAA,UAC9CK,GACTA,EAAM,YAAc,UAAYL,EAAAA,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAM9CK,GAAWA,EAAM,SAAW,cAAgB,SAAU;AAAA,YACrDA,GAAWA,EAAM,SAAW,GAAM,CAAE;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKhCA,GACdA,EAAM,SAAW,OAAYL,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAI/C,IAAKW,GAAAA,IACXA,EAAA,KAAS,OACTA,EAAA,OAAW,SACXA,EAAA,cAAkB,gBAClBA,EAAA,MAAU,QAJCA,IAAAA,GAAA,CAAA,CAAA,EAOAC,GAAAA,IACXA,EAAA,SAAW,WACXA,EAAA,QAAU,UACVA,EAAA,OAAS,SACTA,EAAA,QAAU,UAJCA,IAAAA,GAAA,CAAA,CAAA,EAQAC,GAAAA,IACXA,EAAA,QAAU,UACVA,EAAA,SAAW,WAFAA,IAAAA,GAAA,CAAA,CAAA,EA2CL,MAAMC,EAA2BC,EAAAA,QAAM,WAI7C,CACC,CACC,eAAAC,EACA,eAAAC,EACA,aAAAC,EACA,QAAAC,EACA,UAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,sBAAAC,EACA,kBAAAC,EACA,kBAAAC,EACA,qBAAAC,CAAA,EAEDC,KACI,CAEJ,MAAMC,EAAiBC,EAAAA,OAAO,IAAI,EAC5B,CAACC,EAAQC,CAAS,EAAIC,WAAS,CACnC,KAAyB,GACzB,OAA2B,GAC3B,cAAkC,GAClC,MAA0B,EAAA,CAC3B,EAEKC,EAAmBC,EAAAA,YAAY,IAAM,CAC1CH,EAAWI,GACLA,EAAK,MAGH,CACN,GAAGA,EACF,MAA0B,EAAA,EAJpBA,CAMR,CACF,EAAG,CAAA,CAAE,EAELC,EAAAA,WAAWR,EAAgB,IAAM,CAChCK,EAAA,CACD,CAAC,EAEDI,EAAAA,UAAU,IAAM,CACXZ,GACHM,EAAWI,GACLA,EAAK,MAGH,CACN,GAAGA,EACF,MAA0B,EAAA,EAJpBA,CAMR,CAEH,EAAG,CAACV,CAAiB,CAAC,EAEtB,SAASa,EACRC,EAGAC,EACC,CAGD,GAFAD,EAAE,iBAAA,EAEEC,IAAS,QAAyB,CACrC,GAAIf,EAAmB,OACvBM,EAAWI,IACH,CACN,GAAGA,EACF,MAA0B,CAACL,EAAO,KAAA,EAEpC,CACF,CAEAd,EAAewB,CAAI,CACpB,CAEA,MAAI,CAACrB,GAAS,QAAU,CAACF,GAAkB,CAACG,GAAW,OAAezB,EAAAA,IAAAC,EAAAA,SAAA,EAAE,SAGtEK,EAAA,CACC,SAAA,CAAAkB,GAAS,SAAS,OAAA,GAClBsB,EAAAA,KAAA7C,EAAAA,SAAA,CACC,SAAA,CAAAD,EAAAA,IAAC+C,EAAAA,QAAA,CAAQ,KAAM,QAAS,UAAU,SACjC,SAAA/C,EAAAA,IAACS,EAAA,CACA,MAAO,CACN,WAAY,CAAA,EAEb,SAAUqB,EACV,OAAQ,CAAC,CAACK,EAAO,MACjB,QAAUS,GAAM,CACXd,GACJa,EAAYC,EAAG,OAAA,CAChB,EAEA,SAAA5C,EAAAA,IAACgD,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO7C,EAAagC,EAAO,KAAK,CAAA,CAAA,CACjC,CAAA,EAEF,EACCA,EAAO,OACPnC,MAACY,EAAA,CAAe,IAAKqB,EACpB,SAAAjC,EAAAA,IAACD,EAAA,CACA,aAAekD,GAAS,CACvBX,EAAA,EACAf,IAAe0B,EAAK,KAAK,CAC1B,CAAA,CAAA,CACD,CACD,CAAA,EAEF,EAGAzB,GAAS,SAAS,MAAA,GAClBxB,EAAAA,IAAAC,EAAAA,SAAA,CACC,eAAC8C,EAAAA,QAAA,CAAQ,KAAM,OAAQ,UAAU,SAChC,SAAA/C,EAAAA,IAACS,EAAA,CACA,SAAUqB,EACV,OAAQ,CAAC,CAACK,EAAO,KACjB,QAAUS,GAAM,CACXd,GACJa,EAAYC,EAAG,MAAA,CAChB,EAEA,SAAA5C,EAAAA,IAACkD,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO/C,EAAagC,EAAO,IAAI,CAAA,CAAA,CAChC,CAAA,EAEF,CAAA,CACD,EAEAX,GAAS,SAAS,QAAA,GAClBxB,EAAAA,IAAAC,EAAAA,SAAA,CACC,eAAC8C,EAAAA,QAAA,CAAQ,KAAM,UAAW,UAAU,SACnC,SAAA/C,EAAAA,IAACS,EAAA,CACA,SAAUqB,EACV,QAAUc,GAAM,CACXd,GACJa,EAAYC,EAAG,QAAA,CAChB,EACA,OAAQ,CAAC,CAACT,EAAO,OAEjB,SAAAnC,EAAAA,IAACmD,EAAAA,QAAA,CACA,MAAO,EACP,OAAQ,GACR,MAAOhD,EAAagC,EAAO,MAAM,CAAA,CAAA,CAClC,CAAA,EAEF,CAAA,CACD,EAEAX,GAAS,SAAS,eAAA,GAClBxB,EAAAA,IAAAC,EAAAA,SAAA,CACC,eAAC8C,EAAAA,QAAA,CAAQ,KAAM,gBAAiB,UAAU,SACzC,SAAA/C,EAAAA,IAACS,EAAA,CACA,SAAUqB,EACV,OAAQ,CAAC,CAACK,EAAO,cACjB,MAAO,CAAE,YAAa,CAAA,EACtB,QAAUS,GAAM,CACXd,GACJa,EAAYC,EAAG,eAAA,CAChB,EAEA,SAAA5C,EAAAA,IAACoD,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAOjD,EAAagC,EAAO,aAAa,CAAA,CAAA,CACzC,CAAA,EAEF,CAAA,CACD,EAEAV,GAAW,OACXzB,EAAAA,IAACa,GACC,SAAAY,EAAU,IAAK4B,GACXA,EAAO,OAAS,WAElBrD,EAAAA,IAACsD,EAAAA,iBAAA,CAEA,MAAOD,EAAO,MACd,SAAUvB,GAAqBuB,EAAO,SACtC,QAASA,EAAO,QAChB,YAAaA,EAAO,YACpB,MAAOA,EAAO,MACd,eAAgBA,EAAO,eACvB,kBAAAxB,EACA,QAAS,IAAM,CACVC,GACJJ,IAAkB2B,EAAO,KAAM,SAAA,CAChC,EACA,aAAeE,GAAW,CACrBzB,GACJH,IAAiB0B,EAAO,KAAME,CAAM,CACrC,EACA,oBAAqB,IAAM,CACtBzB,GACJF,IAAA,CACD,EACA,4BACCyB,EAAO,MAAM,YAAA,IAAkB,oBAEhC,yBAA0B,IAAM,CAC3BvB,GACJJ,IAAkB2B,EAAO,KAAM,UAAA,CAChC,CAAA,EA1BKA,EAAO,IAAA,QAgCb,MAAA,CACA,SAAArD,EAAAA,IAACc,EAAA,CACA,SACCgB,GAAqBuB,EAAO,UAAYA,EAAO,QAGhD,SAAArD,EAAAA,IAACe,GAAA,CACA,KAAK,SACL,YAAa,CAAC,CAACsC,EAAO,aAAe,CAAC,CAACA,EAAO,UAC9C,SAAUA,EAAO,UAAYA,EAAO,QACpC,QAAS,IAAM,CACVvB,GACJJ,IAAkB2B,EAAO,KAAM,SAAA,CAChC,EAEC,SAAAA,EAAO,QAAU,MAAQA,EAAO,KAAA,CAAA,CAClC,CAAA,CACD,EAjBSA,EAAO,IAkBjB,CAED,EACF,EACG,KACJrD,EAAAA,IAACW,GACC,SAAAW,GACAtB,EAAAA,IAACsB,GAAe,qBAAsB,CAAC,CAACS,CAAA,CAAsB,CAAA,CAEhE,CAAA,EACD,CAEF,CACD,EAEAZ,EAAyB,YAAc"}
1	+ {"version":3,"file":"WhatsAppTextEditorHeader.js","sources":["../../../../src/components/WhatsAppTextEditor/WhatsAppTextEditorHeader.tsx"],"sourcesContent":["// import EmojiPicker from 'emoji-picker-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport { useOutside } from '@src/hooks/useOutside';\nimport { COLORS } from '@src/constants/Theme';\nimport BoldIcon from '../../assets/icons/bold.svg';\nimport EmojiIcon from '../../assets/icons/emoji.svg';\nimport ItalicIcon from '../../assets/icons/italic.svg';\nimport StrikeThroughIcon from '../../assets/icons/strikeThrough.svg';\nimport { Tooltip } from '../tooltips/Tooltip';\nimport { AIActionToneOption, AIRephraseButton } from './AIRephraseButton';\n\nlet EmojiPicker: any = () => <></>;\nif (typeof window !== 'undefined') {\n\timport('emoji-picker-react').then((_module) => {\n\t\tEmojiPicker = _module.default;\n\t});\n}\n\nconst getIconColor = (isActive: boolean) => {\n\tif (isActive) return COLORS.background.inverseLight;\n\treturn COLORS.content.placeholder;\n};\n\nconst Container = styled.div`\n\tbackground: ${COLORS.surface.standard};\n\tdisplay: flex;\n\tflex-direction: row;\n\tpadding: 8px 12px;\n\talign-items: center;\n\tborder-radius: 0 0 4px 4px;\n\tgap: 6px;\n\tposition: relative;\n`;\nexport const CustomRightBorder = styled.div`\n\twidth: 2px;\n\theight: 12px;\n\tbackground: #e0e0e0;\n`;\n\nconst ButtonHolder = styled.div<{ active: boolean; disabled?: boolean }>`\n\tpadding: 2px 6px;\n\tbackground: ${(props) =>\n\t\tprops.active ? COLORS.background.inactive : 'transparent'};\n\tborder-radius: 4px;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\topacity: ${(props) => (props.disabled ? 0.45 : 1)};\n\tdisplay: flex;\n\t:hover {\n\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\tpadding: 3px 6px;\n\t}\n`;\n\nconst CustomRightSideContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: auto;\n`;\n\nconst EmojiContainer = styled.div`\n\tposition: absolute;\n\ttop: calc(100% + 8px);\n\tz-index: 1;\n`;\n\nconst AIActionsContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 6px;\n\tmargin-left: 8px;\n`;\n\nconst AIButtonGroup = styled.div<{ disabled?: boolean }>`\n\tdisplay: flex;\n\talign-items: center;\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 14px;\n\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n`;\n\nconst AIButton = styled.button<{ highlighted: boolean; disabled?: boolean }>`\n\tborder: 0;\n\tbackground: ${(props) =>\n\t\tprops.highlighted ? '#ffe8ef' : COLORS.surface.standard};\n\tcolor: ${(props) =>\n\t\tprops.highlighted ? '#f53f77' : COLORS.content.secondary};\n\tborder-radius: 14px;\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\topacity: ${(props) => (props.disabled ? 0.5 : 1)};\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 4px;\n\t:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.disabled ? undefined : COLORS.surface.subdued};\n\t}\n`;\n\nexport enum EditorActionTypes {\n\t'BOLD' = 'BOLD',\n\t'ITALIC' = 'ITALIC',\n\t'STRIKETHROUGH' = 'STRIKETHROUGH',\n\t'EMOJI' = 'EMOJI',\n}\n\nexport enum AIEditorActionTypes {\n\tREPHRASE = 'rephrase',\n\tSHORTEN = 'shorten',\n\tEXPAND = 'expand',\n\tEMOJIFY = 'emojify',\n}\n\nexport type AIEditorActionType = AIEditorActionTypes;\nexport enum AIActionVariant {\n\tDEFAULT = 'default',\n\tREPHRASE = 'rephrase',\n}\n\nexport type AIHeaderAction = {\n\ttype: AIEditorActionType;\n\tlabel: string;\n\tdisabled?: boolean;\n\tloading?: boolean;\n\thighlighted?: boolean;\n\tshowToneDropdown?: boolean;\n\ttones?: AIActionToneOption[];\n\tselectedToneId?: string;\n\tisPrimary?: boolean;\n};\n\n/** Props passed to optional `RightComponent` (e.g. Add variable). /\nexport type WhatsAppEditorRightSlotProps = {\n\t/\n\t True while an AI suggestion session is open (accept/reject) or while the model is generating.\n\t * Host should disable extra actions like “Add variable”.\n\t */\n\trightActionsDisabled?: boolean;\n};\n\nexport type WhatsAppTextEditorHeaderProps = {\n\tonActionSelect: (actionType: EditorActionTypes) => void;\n\tRightComponent?: React.ComponentType<WhatsAppEditorRightSlotProps>;\n\tonEmojiClick?: (emoji: string) => void;\n\tactions?: EditorActionTypes[];\n\taiActions?: AIHeaderAction[];\n\tonAIActionClick?: (\n\t\tactionType: AIEditorActionType,\n\t\tactionVariant?: AIActionVariant,\n\t) => void;\n\tonAIToneChange?: (actionType: AIEditorActionType, toneId: string) => void;\n\tonAIInstructionsClick?: () => void;\n\tinstructionActive?: boolean;\n\tdisableAllActions?: boolean;\n\trightActionsDisabled?: boolean;\n};\n\nexport const WhatsAppTextEditorHeader = React.forwardRef<\n\tHTMLTextAreaElement,\n\tWhatsAppTextEditorHeaderProps\n>(\n\t(\n\t\t{\n\t\t\tonActionSelect,\n\t\t\tRightComponent,\n\t\t\tonEmojiClick,\n\t\t\tactions,\n\t\t\taiActions,\n\t\t\tonAIActionClick,\n\t\t\tonAIToneChange,\n\t\t\tonAIInstructionsClick,\n\t\t\tinstructionActive,\n\t\t\tdisableAllActions,\n\t\t\trightActionsDisabled,\n\t\t},\n\t\t_ref,\n\t) => {\n\t\tvoid _ref;\n\t\tconst emojiPickerRef = useRef(null);\n\t\tconst [active, setActive] = useState({\n\t\t\t[EditorActionTypes.BOLD]: false,\n\t\t\t[EditorActionTypes.ITALIC]: false,\n\t\t\t[EditorActionTypes.STRIKETHROUGH]: false,\n\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t});\n\n\t\tconst closeEmojiPicker = useCallback(() => {\n\t\t\tsetActive((prev) => {\n\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\treturn prev;\n\t\t\t\t}\n\t\t\t\treturn {\n\t\t\t\t\t...prev,\n\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t};\n\t\t\t});\n\t\t}, []);\n\n\t\tuseOutside(emojiPickerRef, () => {\n\t\t\tcloseEmojiPicker();\n\t\t});\n\n\t\tuseEffect(() => {\n\t\t\tif (disableAllActions) {\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\tif (!prev[EditorActionTypes.EMOJI]) {\n\t\t\t\t\t\treturn prev;\n\t\t\t\t\t}\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: false,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\t\t}, [disableAllActions]);\n\n\t\tfunction handleClick(\n\t\t\te:\n\t\t\t\t\| React.MouseEvent<HTMLDivElement, MouseEvent>\n\t\t\t\t\| React.MouseEvent<SVGElement, MouseEvent>,\n\t\t\ttype: EditorActionTypes,\n\t\t) {\n\t\t\te.preventDefault?.();\n\n\t\t\tif (type === EditorActionTypes.EMOJI) {\n\t\t\t\tif (disableAllActions) return;\n\t\t\t\tsetActive((prev) => {\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...prev,\n\t\t\t\t\t\t[EditorActionTypes.EMOJI]: !active.EMOJI,\n\t\t\t\t\t};\n\t\t\t\t});\n\t\t\t}\n\n\t\t\tonActionSelect(type);\n\t\t}\n\n\t\tif (!actions?.length && !RightComponent && !aiActions?.length) return <></>;\n\n\t\treturn (\n\t\t\t<Container>\n\t\t\t\t{actions?.includes(EditorActionTypes.EMOJI) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Emoji'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginLeft: 0,\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.EMOJI}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.EMOJI);\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<EmojiIcon\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.EMOJI)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t{active.EMOJI && (\n\t\t\t\t\t\t\t<EmojiContainer ref={emojiPickerRef}>\n\t\t\t\t\t\t\t\t<EmojiPicker\n\t\t\t\t\t\t\t\t\tonEmojiClick={(data) => {\n\t\t\t\t\t\t\t\t\t\tcloseEmojiPicker();\n\t\t\t\t\t\t\t\t\t\tonEmojiClick?.(data.emoji);\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</EmojiContainer>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t{actions?.includes(EditorActionTypes.BOLD) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Bold'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.BOLD}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.BOLD);\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<BoldIcon\n\t\t\t\t\t\t\t\t\twidth={10}\n\t\t\t\t\t\t\t\t\theight={17}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.BOLD)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.ITALIC) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Italics'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.ITALIC);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tactive={!!active.ITALIC}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<ItalicIcon\n\t\t\t\t\t\t\t\t\twidth={9}\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.ITALIC)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{actions?.includes(EditorActionTypes.STRIKETHROUGH) && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Tooltip body={'Strikethrough'} placement=\"bottom\">\n\t\t\t\t\t\t\t<ButtonHolder\n\t\t\t\t\t\t\t\tdisabled={disableAllActions}\n\t\t\t\t\t\t\t\tactive={!!active.STRIKETHROUGH}\n\t\t\t\t\t\t\t\tstyle={{ borderRight: 0 }}\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\thandleClick(e, EditorActionTypes.STRIKETHROUGH);\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<StrikeThroughIcon\n\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\theight={18}\n\t\t\t\t\t\t\t\t\tcolor={getIconColor(active.STRIKETHROUGH)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</ButtonHolder>\n\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t\t{aiActions?.length ? (\n\t\t\t\t\t<AIActionsContainer>\n\t\t\t\t\t\t{aiActions.map((action) => {\n\t\t\t\t\t\t\tif (action.type === AIEditorActionTypes.REPHRASE) {\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<AIRephraseButton\n\t\t\t\t\t\t\t\t\t\tkey={action.type}\n\t\t\t\t\t\t\t\t\t\tlabel={action.label}\n\t\t\t\t\t\t\t\t\t\tdisabled={disableAllActions \|\| action.disabled}\n\t\t\t\t\t\t\t\t\t\tloading={action.loading}\n\t\t\t\t\t\t\t\t\t\thighlighted={action.highlighted}\n\t\t\t\t\t\t\t\t\t\ttones={action.tones}\n\t\t\t\t\t\t\t\t\t\tselectedToneId={action.selectedToneId}\n\t\t\t\t\t\t\t\t\t\tinstructionActive={instructionActive}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonToneChange={(toneId) => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIToneChange?.(action.type, toneId);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tonInstructionsClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIInstructionsClick?.();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\tshowSecondaryRephraseOption={\n\t\t\t\t\t\t\t\t\t\t\taction.label.toLowerCase() === 'meta safe rewrite'\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonSecondaryRephraseClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.REPHRASE);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<div key={action.type}>\n\t\t\t\t\t\t\t\t\t<AIButtonGroup\n\t\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\t\tdisableAllActions \|\| action.disabled \|\| action.loading\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<AIButton\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\thighlighted={!!action.highlighted \|\| !!action.isPrimary}\n\t\t\t\t\t\t\t\t\t\t\tdisabled={action.disabled \|\| action.loading}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tif (disableAllActions) return;\n\t\t\t\t\t\t\t\t\t\t\t\tonAIActionClick?.(action.type, AIActionVariant.DEFAULT);\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{action.loading ? '...' : action.label}\n\t\t\t\t\t\t\t\t\t\t</AIButton>\n\t\t\t\t\t\t\t\t\t</AIButtonGroup>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t</AIActionsContainer>\n\t\t\t\t) : null}\n\t\t\t\t<CustomRightSideContainer>\n\t\t\t\t\t{RightComponent && (\n\t\t\t\t\t\t<RightComponent rightActionsDisabled={!!rightActionsDisabled} />\n\t\t\t\t\t)}\n\t\t\t\t</CustomRightSideContainer>\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nWhatsAppTextEditorHeader.displayName = 'WhatsAppTextEditorHeader';\n"],"names":["EmojiPicker","jsx","Fragment","_module","getIconColor","isActive","COLORS","Container","styled","CustomRightBorder","ButtonHolder","props","CustomRightSideContainer","EmojiContainer","AIActionsContainer","AIButtonGroup","AIButton","EditorActionTypes","AIEditorActionTypes","AIActionVariant","WhatsAppTextEditorHeader","React","onActionSelect","RightComponent","onEmojiClick","actions","aiActions","onAIActionClick","onAIToneChange","onAIInstructionsClick","instructionActive","disableAllActions","rightActionsDisabled","_ref","emojiPickerRef","useRef","active","setActive","useState","closeEmojiPicker","useCallback","prev","useOutside","useEffect","handleClick","e","type","jsxs","Tooltip","EmojiIcon","data","BoldIcon","ItalicIcon","StrikeThroughIcon","action","AIRephraseButton","toneId"],"mappings":"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"}

package/dist/cjs/components/accordion/Accordion.style.js CHANGED Viewed

@@ -28,7 +28,7 @@
 				display: flex;
 				gap: 8px;
 			}
-			&:hover {
+			:hover {
 				background: ${e=>e.skipHoverState?null:r.COLORS.surface.subdued};
 				border-radius: ${e=>e.skipHoverState?null:"4px"};
 			}

package/dist/cjs/components/accordion/Accordion.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Accordion.style.js","sources":["../../../../src/components/accordion/Accordion.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { AccordionProps } from './Accordion.model';\n\nconst AccordionStyle = styled.div<{\n\tisActive: boolean;\n\twidth?: string;\n\tcontentMargin?: string;\n\tskipHoverState?: boolean;\n\theaderPadding?: string;\n\tshowBorders?: boolean;\n\tborderColor?: string;\n\tborderRadius?: string;\n\tbackgroundColor?: string;\n\thasChildrenMaxHeight?: boolean;\n\topenDirection?: AccordionProps['openDirection'];\n}>`\n\twidth: ${(props) => props?.width \|\| '100%'};\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: ${(props) =>\n\t\tprops.showBorders ? '1px solid ' + COLORS.stroke.primary : ''};\n\tborder-color: ${(props) => props.borderColor \|\| COLORS.stroke.primary};\n\tborder-radius: ${(props) =>\n\t\tprops.borderRadius ? props.borderRadius : props.showBorders ? '4px' : ''};\n\tbackground: ${(props) => props.backgroundColor \|\| 'unset'};\n\t.accordion {\n\t\t&__overview {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 4px;\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.headerPadding ? props.headerPadding : '24px'};\n\t\t\tborder-bottom: ${(props) =>\n\t\t\t\tprops.showBorders && props.isActive\n\t\t\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t\t\t: ''};\n\t\t\tborder-color: ${(props) => props.borderColor \|\| COLORS.stroke.primary};\n\t\t\t&__header {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t\t&__header-buttons {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\t\t\t&__title-wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbackground: ${(props) =>\n\t\t\t\t\t!props.skipHoverState ? COLORS.surface.subdued : null};\n\t\t\t\tborder-radius: ${(props) => (!props.skipHoverState ? '4px' : null)};\n\t\t\t}\n\t\t}\n\t\t&__content {\n\t\t\t${(props) =>\n\t\t\t\tprops.isActive\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tmargin: props?.contentMargin \|\| '0px',\n\t\t\t\t\t }\n\t\t\t\t\t: {}};\n\t\t\toverflow: ${(props) =>\n\t\t\t\tprops.hasChildrenMaxHeight ? 'scroll' : 'hidden'};\n\t\t\tmax-height: 0;\n\t\t\torder: ${(props) => (props.openDirection === 'UP' ? -1 : 0)};\n\t\t}\n\t}\n`;\n\nexport default AccordionStyle;\n\nexport const AccordionHeaderGroup = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 24px;\n`;\n\nexport const AccordionHeaderGroup2 = styled.div`\n\tdisplay: flex;\n\tgap: 16px;\n`;\n"],"names":["AccordionStyle","styled","props","COLORS","AccordionHeaderGroup","AccordionHeaderGroup2"],"mappings":"sPAIMA,EAAiBC,EAAAA,QAAO;AAAA,UAanBC,GAAUA,GAAO,OAAS,MAAM;AAAA;AAAA;AAAA,WAG/BA,GACVA,EAAM,YAAc,aAAeC,SAAO,OAAO,QAAU,EAAE;AAAA,iBAC7CD,GAAUA,EAAM,aAAeC,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACnDD,GACjBA,EAAM,aAAeA,EAAM,aAAeA,EAAM,YAAc,MAAQ,EAAE;AAAA,eAC1DA,GAAUA,EAAM,iBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM3CA,GACXA,EAAM,cAAgBA,EAAM,cAAgB,MAAM;AAAA,oBACjCA,GACjBA,EAAM,aAAeA,EAAM,SACxB,aAAeC,EAAAA,OAAO,OAAO,QAC7B,EAAE;AAAA,mBACWD,GAAUA,EAAM,aAAeC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBrDD,GACbA,EAAM,eAA0C,KAAzBC,EAAAA,OAAO,QAAQ,OAAc;AAAA,qBACpCD,GAAYA,EAAM,eAAyB,KAAR,KAAa;AAAA;AAAA;AAAA;AAAA,KAIhEA,GACFA,EAAM,SACH,CACA,OAAQA,GAAO,eAAiB,KAChC,EACA,EAAE;AAAA,eACOA,GACZA,EAAM,qBAAuB,SAAW,QAAQ;AAAA;AAAA,YAEvCA,GAAWA,EAAM,gBAAkB,KAAO,GAAK,CAAE;AAAA;AAAA;AAAA,EAOjDE,EAAuBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAwBJ,EAAAA,QAAO;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"Accordion.style.js","sources":["../../../../src/components/accordion/Accordion.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { AccordionProps } from './Accordion.model';\n\nconst AccordionStyle = styled.div<{\n\tisActive: boolean;\n\twidth?: string;\n\tcontentMargin?: string;\n\tskipHoverState?: boolean;\n\theaderPadding?: string;\n\tshowBorders?: boolean;\n\tborderColor?: string;\n\tborderRadius?: string;\n\tbackgroundColor?: string;\n\thasChildrenMaxHeight?: boolean;\n\topenDirection?: AccordionProps['openDirection'];\n}>`\n\twidth: ${(props) => props?.width \|\| '100%'};\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder: ${(props) =>\n\t\tprops.showBorders ? '1px solid ' + COLORS.stroke.primary : ''};\n\tborder-color: ${(props) => props.borderColor \|\| COLORS.stroke.primary};\n\tborder-radius: ${(props) =>\n\t\tprops.borderRadius ? props.borderRadius : props.showBorders ? '4px' : ''};\n\tbackground: ${(props) => props.backgroundColor \|\| 'unset'};\n\t.accordion {\n\t\t&__overview {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: 4px;\n\t\t\tpadding: ${(props) =>\n\t\t\t\tprops.headerPadding ? props.headerPadding : '24px'};\n\t\t\tborder-bottom: ${(props) =>\n\t\t\t\tprops.showBorders && props.isActive\n\t\t\t\t\t? '1px solid ' + COLORS.stroke.primary\n\t\t\t\t\t: ''};\n\t\t\tborder-color: ${(props) => props.borderColor \|\| COLORS.stroke.primary};\n\t\t\t&__header {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: space-between;\n\t\t\t}\n\t\t\t&__header-buttons {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\t\t\t&__title-wrapper {\n\t\t\t\tdisplay: flex;\n\t\t\t\tgap: 8px;\n\t\t\t}\n\t\t\t:hover {\n\t\t\t\tbackground: ${(props) =>\n\t\t\t\t\t!props.skipHoverState ? COLORS.surface.subdued : null};\n\t\t\t\tborder-radius: ${(props) => (!props.skipHoverState ? '4px' : null)};\n\t\t\t}\n\t\t}\n\t\t&__content {\n\t\t\t${(props) =>\n\t\t\t\tprops.isActive\n\t\t\t\t\t? {\n\t\t\t\t\t\t\tmargin: props?.contentMargin \|\| '0px',\n\t\t\t\t\t }\n\t\t\t\t\t: {}};\n\t\t\toverflow: ${(props) =>\n\t\t\t\tprops.hasChildrenMaxHeight ? 'scroll' : 'hidden'};\n\t\t\tmax-height: 0;\n\t\t\torder: ${(props) => (props.openDirection === 'UP' ? -1 : 0)};\n\t\t}\n\t}\n`;\n\nexport default AccordionStyle;\n\nexport const AccordionHeaderGroup = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 24px;\n`;\n\nexport const AccordionHeaderGroup2 = styled.div`\n\tdisplay: flex;\n\tgap: 16px;\n`;\n"],"names":["AccordionStyle","styled","props","COLORS","AccordionHeaderGroup","AccordionHeaderGroup2"],"mappings":"sPAIMA,EAAiBC,EAAAA,QAAO;AAAA,UAanBC,GAAUA,GAAO,OAAS,MAAM;AAAA;AAAA;AAAA,WAG/BA,GACVA,EAAM,YAAc,aAAeC,SAAO,OAAO,QAAU,EAAE;AAAA,iBAC7CD,GAAUA,EAAM,aAAeC,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACnDD,GACjBA,EAAM,aAAeA,EAAM,aAAeA,EAAM,YAAc,MAAQ,EAAE;AAAA,eAC1DA,GAAUA,EAAM,iBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAM3CA,GACXA,EAAM,cAAgBA,EAAM,cAAgB,MAAM;AAAA,oBACjCA,GACjBA,EAAM,aAAeA,EAAM,SACxB,aAAeC,EAAAA,OAAO,OAAO,QAC7B,EAAE;AAAA,mBACWD,GAAUA,EAAM,aAAeC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAgBrDD,GACbA,EAAM,eAA0C,KAAzBC,EAAAA,OAAO,QAAQ,OAAc;AAAA,qBACpCD,GAAYA,EAAM,eAAyB,KAAR,KAAa;AAAA;AAAA;AAAA;AAAA,KAIhEA,GACFA,EAAM,SACH,CACA,OAAQA,GAAO,eAAiB,KAChC,EACA,EAAE;AAAA,eACOA,GACZA,EAAM,qBAAuB,SAAW,QAAQ;AAAA;AAAA,YAEvCA,GAAWA,EAAM,gBAAkB,KAAO,GAAK,CAAE;AAAA;AAAA;AAAA,EAOjDE,EAAuBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,EAM9BI,EAAwBJ,EAAAA,QAAO;AAAA;AAAA;AAAA"}

package/dist/cjs/components/action-button/ActionButton.styled.js CHANGED Viewed

@@ -11,7 +11,7 @@
 	border-radius: 4px;
 	border: ${e=>e.border??`1px solid ${t.BASE_COLORS.grayscale[200]}`};
 	cursor: pointer;
-	&:hover {
+	:hover {
 		background-color: ${e=>e.isSelected||e.isError?"":t.BASE_COLORS.grayscale[200]};
 		border: ${e=>e.isSelected||e.isError?"":e.isConfigured?`1px solid ${t.BASE_COLORS.grayscale[400]}`:`1px dashed ${t.BASE_COLORS.grayscale[400]}`};
 	}

package/dist/cjs/components/action-button/ActionButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured \|\| props.isSelected \|\| props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","styled","props","BASE_COLORS"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA,UAOjCC,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO1BA,GACdA,EAAM,cAAgBA,EAAM,YAAcA,EAAM,QAC7C,4BACA,EAAE;AAAA;AAAA;AAAA,WAGKA,GACVA,EAAM,QAAU,aAAaC,EAAAA,YAAY,UAAU,GAAK,CAAC,EAAE;AAAA;AAAA;AAAA,sBAGtCD,GACpBA,EAAM,YAAcA,EAAM,QAAU,GAAKC,EAAAA,YAAY,UAAU,GAAK,CAAC;AAAA,YAC3DD,GACVA,EAAM,YAAcA,EAAM,QACvB,GACAA,EAAM,aACN,aAAaC,EAAAA,YAAY,UAAU,GAAK,CAAC,GACzC,cAAcA,EAAAA,YAAY,UAAU,GAAK,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"ActionButton.styled.js","sources":["../../../../src/components/action-button/ActionButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS } from '@src/constants/Theme';\n\nexport const ActionButtonContainer = styled.div<{\n\tisSelected: boolean;\n\tisError: boolean;\n\tborder: string;\n\tisConfigured: boolean;\n\twidth?: string;\n}>`\n\twidth: ${(props) => props.width ?? '100%'};\n\tdisplay: flex;\n\tflex-direction: row;\n\tjustify-content: center;\n\talign-items: center;\n\tgap: 8px;\n\tpadding: 14px 0px;\n\tbox-shadow: ${(props) =>\n\t\tprops.isConfigured \|\| props.isSelected \|\| props.isError\n\t\t\t? '0px 2px 8px 0px #0000001f'\n\t\t\t: ''};\n\tbackground-color: white;\n\tborder-radius: 4px;\n\tborder: ${(props) =>\n\t\tprops.border ?? `1px solid ${BASE_COLORS.grayscale['200']}`};\n\tcursor: pointer;\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError ? '' : BASE_COLORS.grayscale['200']};\n\t\tborder: ${(props) =>\n\t\t\tprops.isSelected \|\| props.isError\n\t\t\t\t? ''\n\t\t\t\t: props.isConfigured\n\t\t\t\t? `1px solid ${BASE_COLORS.grayscale['400']}`\n\t\t\t\t: `1px dashed ${BASE_COLORS.grayscale['400']}`};\n\t}\n\n\t.action__icon {\n\t\theight: 20px;\n\t\twidth: 20px;\n\t}\n`;\n"],"names":["ActionButtonContainer","styled","props","BASE_COLORS"],"mappings":"0NAGaA,EAAwBC,EAAAA,QAAO;AAAA,UAOjCC,GAAUA,EAAM,OAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO1BA,GACdA,EAAM,cAAgBA,EAAM,YAAcA,EAAM,QAC7C,4BACA,EAAE;AAAA;AAAA;AAAA,WAGKA,GACVA,EAAM,QAAU,aAAaC,EAAAA,YAAY,UAAU,GAAK,CAAC,EAAE;AAAA;AAAA;AAAA,sBAGtCD,GACpBA,EAAM,YAAcA,EAAM,QAAU,GAAKC,EAAAA,YAAY,UAAU,GAAK,CAAC;AAAA,YAC3DD,GACVA,EAAM,YAAcA,EAAM,QACvB,GACAA,EAAM,aACN,aAAaC,EAAAA,YAAY,UAAU,GAAK,CAAC,GACzC,cAAcA,EAAAA,YAAY,UAAU,GAAK,CAAC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js CHANGED Viewed

@@ -101,7 +101,7 @@
 		justify-content: center;
 		border-radius: 5px;
 		cursor: pointer;
-		&:hover {
+		:hover {
 			background-color: ${e.COLORS.surface.hovered};
 		}
 	}

package/dist/cjs/components/analytics-chips-and-dropdowns/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":"gSAIaA,EAAyBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU7BC,GAAUA,EAAM,eAAe;AAAA;AAAA,UAEpCA,GAAWA,EAAM,MAAQA,EAAM,MAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchDC,EAAwBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BG,EAAeH,EAAAA,QAAOI,gBAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAAA,YAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO/BJ,GAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB3BK,EAAoBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUrBC,GACjBA,EAAM,WAAa,OAAS,aAAaI,cAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGjDJ,GACpBA,EAAM,WAAaI,EAAAA,YAAY,SAAS,EAAE,EAAIA,EAAAA,YAAY,UAAU,KAAK;AAAA;AAAA,sBAEpDJ,GACpBA,EAAM,WAAa,GAAKI,cAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGxBJ,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,4BAC5CA,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,8BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,+BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,EAG/DM,EAA0BP,EAAAA,QAAO;AAAA,WAGlCC,GAAWA,EAAM,KAAO,EAAI,CAAE,YAAYO,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,GAExEP,GACFA,EAAM,KACH;AAAA;AAAA;AAAA,wBAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKhCC,EAAgBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA"}
1	+ {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":"gSAIaA,EAAyBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU7BC,GAAUA,EAAM,eAAe;AAAA;AAAA,UAEpCA,GAAWA,EAAM,MAAQA,EAAM,MAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAchDC,EAAwBF,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS/BG,EAAeH,EAAAA,QAAOI,gBAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAAA,YAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAO/BJ,GAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAyB3BK,EAAoBN,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUrBC,GACjBA,EAAM,WAAa,OAAS,aAAaI,cAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGjDJ,GACpBA,EAAM,WAAaI,EAAAA,YAAY,SAAS,EAAE,EAAIA,EAAAA,YAAY,UAAU,KAAK;AAAA;AAAA,sBAEpDJ,GACpBA,EAAM,WAAa,GAAKI,cAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGxBJ,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,4BAC5CA,GAAWA,EAAM,YAAc,MAAQ,KAAM;AAAA,8BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,+BAC3CA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA,EAG/DM,EAA0BP,EAAAA,QAAO;AAAA,WAGlCC,GAAWA,EAAM,KAAO,EAAI,CAAE,YAAYO,EAAAA,OAAO,WAAW,IAAI;AAAA;AAAA,GAExEP,GACFA,EAAM,KACH;AAAA;AAAA;AAAA,wBAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,EAKhCC,EAAgBT,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAAA,OAAO,WAAW,UAAU;AAAA;AAAA"}

package/dist/cjs/components/bik-layout/SidebarStyles.js CHANGED Viewed

@@ -262,7 +262,7 @@
 		border-bottom: 0.5px solid #e0e0e0;
 		cursor: pointer;
 		max-width: 320px;
-		&:hover {
+		:hover {
 			background-color: ${t.COLORS.background.base};
 			border-radius: 8px;
 		}

package/dist/cjs/components/bik-layout/SidebarStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}
1	+ {"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}

package/dist/cjs/components/button/Button.styled.js CHANGED Viewed

@@ -66,7 +66,7 @@
 	${e.getDashedBorderStyling(t.buttonType,t.size,n.COLORS.content.brand)}
 	`}
-	&:disabled {
+	:disabled {
 		.overlay-container {
 			display: none !important;
 		}
@@ -78,7 +78,7 @@
 		${t=>e.getDashedBorderStyling(t.buttonType,t.size,n.COLORS.stroke.primary)}
 	}
-	${t=>!t.disabled&&!t.isLoading&&`&:active {
+	${t=>!t.disabled&&!t.isLoading&&`:active {
 				.button-container {
 					display: flex;
 					${t.matchParentWidth?"justify-content: center;":""}
@@ -136,7 +136,7 @@
 					line-height: 0;
 				}
 			}
-		}`:`&:not(:active):not(:disabled):hover {
+		}`:`:not(:active):not(:disabled):hover {
 			padding: 0;
 			.button-container {
 				display: flex;

package/dist/cjs/components/button/Button.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t&:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`&:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `&:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\n\n\t\t.button-container {\n\t\t\tdisplay: flex;\n\t\t\tposition: relative;\n\t\t\twidth: 100%;\n\t\t\t.text {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js CHANGED Viewed

@@ -28,7 +28,7 @@
 			justify-content: center;
 		}
 	}
-	&:hover {
+	:hover {
 		cursor: pointer;
 	}
 `;exports.Button=s;exports.ButtonGroupStyle=c;

package/dist/cjs/components/buttonGroup/ButtonGroupStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string \| undefined;\n\tsize: 'small' \| 'medium' \| 'large';\n\tgap: string \| undefined;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width \|\| '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap \|\| '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tsize: 'small' \| 'medium' \| 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":"0NAGMA,EAAuB,CAC5B,MAAO,WACP,OAAQ,YACR,MAAO,WACR,EAEMC,EAAoB,CACzB,MAAO,OACP,OAAQ,OACR,MAAO,MACR,EAEaC,EAAmBC,EAAAA,QAAO;AAAA;AAAA;AAAA,UAQ5BC,GAAUA,EAAM,OAAS,MAAM;AAAA,WAC9BA,GACVA,EAAM,eAAiB,MACpB,OACAA,EAAM,KACNH,EAAkBG,EAAM,IAAI,EAC5B,MAAM;AAAA,eACKA,GACdA,EAAM,eAAiB,MACpBA,EAAM,KACLH,EAAkBG,EAAM,IAAI,EAC5B,OACD,MAAM;AAAA,QACFA,GAAUA,EAAM,KAAO,MAAM;AAAA,EAGzBC,EAASF,EAAAA,QAAO;AAAA;AAAA,mBASTC,GAClBA,EAAM,eAAiB,MACpBA,EAAM,eAAiB,OACtB,MACA,cACD,QAAQ;AAAA,SACHA,GAAWA,EAAM,iBAAmB,EAAI,OAAQ;AAAA,WAC9CA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eACtDA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eAC1DA,GACdA,EAAM,SAAWE,EAAAA,OAAO,WAAW,WAAaF,EAAM,eAAe;AAAA;AAAA,IAElEA,GACFA,EAAM,SAAWE,EAAAA,OAAO,WAAW,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACvDF,GAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGlCA,GACXA,EAAM,KAAOJ,EAAqBI,EAAM,IAAI,EAAI,UAAU;AAAA,QACnDA,GACPA,EAAM,cAAgBA,EAAM,eAAiB,MAAQ,OAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string \| undefined;\n\tsize: 'small' \| 'medium' \| 'large';\n\tgap: string \| undefined;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width \|\| '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap \|\| '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tsize: 'small' \| 'medium' \| 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":"0NAGMA,EAAuB,CAC5B,MAAO,WACP,OAAQ,YACR,MAAO,WACR,EAEMC,EAAoB,CACzB,MAAO,OACP,OAAQ,OACR,MAAO,MACR,EAEaC,EAAmBC,EAAAA,QAAO;AAAA;AAAA;AAAA,UAQ5BC,GAAUA,EAAM,OAAS,MAAM;AAAA,WAC9BA,GACVA,EAAM,eAAiB,MACpB,OACAA,EAAM,KACNH,EAAkBG,EAAM,IAAI,EAC5B,MAAM;AAAA,eACKA,GACdA,EAAM,eAAiB,MACpBA,EAAM,KACLH,EAAkBG,EAAM,IAAI,EAC5B,OACD,MAAM;AAAA,QACFA,GAAUA,EAAM,KAAO,MAAM;AAAA,EAGzBC,EAASF,EAAAA,QAAO;AAAA;AAAA,mBASTC,GAClBA,EAAM,eAAiB,MACpBA,EAAM,eAAiB,OACtB,MACA,cACD,QAAQ;AAAA,SACHA,GAAWA,EAAM,iBAAmB,EAAI,OAAQ;AAAA,WAC9CA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eACtDA,GAAWA,EAAM,eAAiB,MAAQ,OAAS,MAAO;AAAA,eAC1DA,GACdA,EAAM,SAAWE,EAAAA,OAAO,WAAW,WAAaF,EAAM,eAAe;AAAA;AAAA,IAElEA,GACFA,EAAM,SAAWE,EAAAA,OAAO,WAAW,aAAeA,EAAAA,OAAO,OAAO,OAAO;AAAA,kBACvDF,GAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGlCA,GACXA,EAAM,KAAOJ,EAAqBI,EAAM,IAAI,EAAI,UAAU;AAAA,QACnDA,GACPA,EAAM,cAAgBA,EAAM,eAAiB,MAAQ,OAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/card-selector/CardSelector.styled.js CHANGED Viewed

@@ -9,7 +9,7 @@
 	background-color: ${e=>e.selected?t.COLORS.background.brandLight:t.COLORS.surface.subdued};
 	border: 1px solid
 		${e=>e.selected?t.COLORS.content.brand:e.disabled?t.COLORS.stroke.primary:t.COLORS.content.inactive};
-	&:hover {
+	:hover {
 		background-color: ${e=>e.isTooltipPresent?t.COLORS.surface.subdued:e.selected?t.COLORS.background.brandLight:e.disabled||e.loading?t.COLORS.surface.subdued:t.COLORS.surface.hovered};
 	}
 `,r=d.default.div`

package/dist/cjs/components/card-selector/CardSelector.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled \|\| props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled \|\| props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":"0NAGaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWXC,GAAWA,EAAM,QAAU,SAAW,YAAa;AAAA,WAC5DA,GACVA,EAAM,UAAYA,EAAM,QAAU,cAAgB,SAAS;AAAA,qBACvCA,GACpBA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAEnED,GACFA,EAAM,SACHC,EAAAA,OAAO,QAAQ,MACfD,EAAM,SACNC,EAAAA,OAAO,OAAO,QACdA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEND,GACpBA,EAAM,iBACHC,EAAAA,OAAO,QAAQ,QACfD,EAAM,SACNC,SAAO,WAAW,WAClBD,EAAM,UAAYA,EAAM,QACxBC,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAASH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled \|\| props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled \|\| props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":"0NAGaA,EAAYC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWXC,GAAWA,EAAM,QAAU,SAAW,YAAa;AAAA,WAC5DA,GACVA,EAAM,UAAYA,EAAM,QAAU,cAAgB,SAAS;AAAA,qBACvCA,GACpBA,EAAM,SAAWC,EAAAA,OAAO,WAAW,WAAaA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,IAEnED,GACFA,EAAM,SACHC,EAAAA,OAAO,QAAQ,MACfD,EAAM,SACNC,EAAAA,OAAO,OAAO,QACdA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEND,GACpBA,EAAM,iBACHC,EAAAA,OAAO,QAAQ,QACfD,EAAM,SACNC,SAAO,WAAW,WAClBD,EAAM,UAAYA,EAAM,QACxBC,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,EAIfC,EAASH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/carousel-preview/CarouselPreview.style.js CHANGED Viewed

@@ -40,7 +40,7 @@
 		box-shadow: 0px 1.5px 6px 0px #0000001f;
 		/* height: 100%; */
-		&:hover {
+		:hover {
 			background: white;
 		}
 	}
@@ -59,7 +59,7 @@
 		background-color: white;
 		box-shadow: 0px 1.5px 6px 0px #0000001f;
-		&:hover {
+		:hover {
 			background: white;
 		}
 	}

package/dist/cjs/components/carousel-preview/CarouselPreview.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreview.style.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tshowHeader?: boolean;\n\tremoveBottomBorder?: boolean;\n\tborderRadius?: string;\n\thideBorder?: boolean;\n}>`\n\tbackground-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-top-style: solid;\n\tborder-bottom-style: ${(props) =>\n\t\tprops.removeBottomBorder ? 'unset' : 'solid'};\n\tborder-top-width: 1px;\n\tborder-bottom-width: ${(props) => (props.hideBorder ? '0px' : '1px')};\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tposition: relative;\n\theight: 100%;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '0px'};\n`;\n\nexport const CarouselSlickContainer = styled.div<{\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n}>`\n\twidth: 100%;\n\n\t// Hides the pre-built right arrow\n\t.slick-next:before {\n\t\tcontent: none;\n\t}\n\n\t// Hides the pre-built left arrow\n\t.slick-prev:before {\n\t\tcontent: none;\n\t}\n\n\t// Right arrow styles\n\t.slick-next {\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tright: 10px;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\t\t/* height: 100%; */\n\n\t\t&:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// Left arrow styles\n\t.slick-prev {\n\t\tleft: 5px;\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\n\t\t&:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t.slick-slide {\n\t\tdisplay: flex;\n\t}\n\n\t.slick-slide > div {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding-bottom: 16px;\n\t}\n\n\t.slick-track {\n\t\tflex: 1;\n\t}\n\n\t.slick-list {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-left: -49px;\n\t}\n`;\n"],"names":["Container","styled","COLORS","props","CarouselSlickContainer"],"mappings":"0NAGaA,EAAYC,EAAAA,QAAO;AAAA;AAAA,iBAOfC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,wBAEbC,GACvBA,EAAM,mBAAqB,QAAU,OAAO;AAAA;AAAA,wBAErBA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOlDA,GAAUA,EAAM,cAAgB,KAAK;AAAA,EAG3CC,EAAyBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"CarouselPreview.style.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tshowHeader?: boolean;\n\tremoveBottomBorder?: boolean;\n\tborderRadius?: string;\n\thideBorder?: boolean;\n}>`\n\tbackground-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-top-style: solid;\n\tborder-bottom-style: ${(props) =>\n\t\tprops.removeBottomBorder ? 'unset' : 'solid'};\n\tborder-top-width: 1px;\n\tborder-bottom-width: ${(props) => (props.hideBorder ? '0px' : '1px')};\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tposition: relative;\n\theight: 100%;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '0px'};\n`;\n\nexport const CarouselSlickContainer = styled.div<{\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n}>`\n\twidth: 100%;\n\n\t// Hides the pre-built right arrow\n\t.slick-next:before {\n\t\tcontent: none;\n\t}\n\n\t// Hides the pre-built left arrow\n\t.slick-prev:before {\n\t\tcontent: none;\n\t}\n\n\t// Right arrow styles\n\t.slick-next {\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tright: 10px;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\t\t/* height: 100%; */\n\n\t\t:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// Left arrow styles\n\t.slick-prev {\n\t\tleft: 5px;\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\n\t\t:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t.slick-slide {\n\t\tdisplay: flex;\n\t}\n\n\t.slick-slide > div {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding-bottom: 16px;\n\t}\n\n\t.slick-track {\n\t\tflex: 1;\n\t}\n\n\t.slick-list {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-left: -49px;\n\t}\n`;\n"],"names":["Container","styled","COLORS","props","CarouselSlickContainer"],"mappings":"0NAGaA,EAAYC,EAAAA,QAAO;AAAA;AAAA,iBAOfC,EAAAA,OAAO,OAAO,OAAO;AAAA;AAAA,wBAEbC,GACvBA,EAAM,mBAAqB,QAAU,OAAO;AAAA;AAAA,wBAErBA,GAAWA,EAAM,WAAa,MAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOlDA,GAAUA,EAAM,cAAgB,KAAK;AAAA,EAG3CC,EAAyBH,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/cjs/components/checkBox/CheckBox.styled.js CHANGED Viewed

@@ -4,7 +4,7 @@
 	align-items: center;
 	cursor: ${e=>e.isDisabled?"default":"pointer"};
 	${e=>e.enableHover&&i.css`
-			&:hover {
+			:hover {
 				background: ${t.COLORS.surface.subdued};
 			}
 		`}

package/dist/cjs/components/checkBox/CheckBox.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t&:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":"2PAIaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UASxBC,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,YACLI,EAAAA,KAAKJ,EAAM,YAAa,GAAI,EAC5BE,EAAAA,OAAO,OAAO,SAAS,SACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
1	+ {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' \| 'DEFAULT' \| 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":"2PAIaA,EAAoBC,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA,WAO5BC,GAAWA,EAAM,WAAa,UAAY,SAAU;AAAA,GAC5DA,GACFA,EAAM,aACNC,EAAAA;AAAAA;AAAAA,kBAEgBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,EAGUC,EAAeJ,EAAAA,QAAO;AAAA,UASxBC,GACTA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA,WACjDA,GACVA,EAAM,OAAS,KAAO,GAAKA,EAAM,OAAS,QAAU,GAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOzDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,UAAY,EAAI,GAAG;AAAA,QACzCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA,GAEC;AAAA,GACCD,GACFA,EAAM,SACNC,EAAAA;AAAAA,wBACsBC,EAAAA,OAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACCF,GACFA,EAAM,SACN,CAACA,EAAM,YACPC,EAAAA;AAAAA;AAAAA,MAEID,EAAM,QACLA,EAAM,YACLI,EAAAA,KAAKJ,EAAM,YAAa,GAAI,EAC5BE,EAAAA,OAAO,OAAO,SAAS,SACxBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}

package/dist/cjs/components/dropdown/MenuItem/MenuItem.js CHANGED Viewed

@@ -1,5 +1,5 @@
 "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("../../../assets/icons/horizontal_dots.svg.js"),i=require("../../../assets/icons/vertical_dots.svg.js"),d=require("styled-components"),o=require("../../../constants/Theme.js"),s=require("../DropdownPopover/index.js"),a=require("../../icon-button/IconButton.js"),u=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=u(d),l=c.default.div`
-	&:hover {
+	:hover {
 		background: ${o.COLORS.surface.subdued};
 	}
 	position: ${e=>e.isNewTag?"relative":""};

package/dist/cjs/components/dropdown/MenuItem/MenuItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/dropdown/MenuItem/MenuItem.tsx"],"sourcesContent":["import HorizontalMoreIcon from '@src/assets/icons/horizontal_dots.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { COLORS } from '../../../constants/Theme';\nimport { DropdownPopover } from '../DropdownPopover';\nimport { OpenDropdownProps } from '../type';\n\nexport type MenuItemDropdownProps = OpenDropdownProps & {\n\tisHorizontal: boolean;\n\tchildren?: React.ReactNode;\n\thideBorder?: boolean;\n\tisNewTag?: boolean;\n};\n\nconst MenuItemDropdownStyle = styled.div<{ isNewTag?: boolean }>`\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\tposition: ${(props) => (props.isNewTag ? 'relative' : '')};\n\t.new--tag {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -8px;\n\t\ttop: -5px;\n\t\tborder-radius: 50%;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1.25px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n`;\n\nexport const MenuItemDropdown: React.FC<MenuItemDropdownProps> = (props) => {\n\treturn (\n\t\t<MenuItemDropdownStyle isNewTag={props.isNewTag}>\n\t\t\t<DropdownPopover {...props}>\n\t\t\t\t<div>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={props.isHorizontal ? HorizontalMoreIcon : MoreIcon}\n\t\t\t\t\t\tbordered={!props?.hideBorder}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{props.isNewTag ? <div className=\"new--tag\"></div> : null}\n\t\t\t</DropdownPopover>\n\t\t</MenuItemDropdownStyle>\n\t);\n};\n\nMenuItemDropdown.displayName = 'MenuItemDropdown';\n"],"names":["MenuItemDropdownStyle","styled","COLORS","props","MenuItemDropdown","jsx","jsxs","DropdownPopover","IconButton","HorizontalMoreIcon","MoreIcon"],"mappings":"ocAgBMA,EAAwBC,EAAAA,QAAO;AAAA;AAAA,gBAErBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,aAExBC,GAAWA,EAAM,SAAW,WAAa,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1CD,SAAO,WAAW,SAAS,OAAO;AAAA,yBACzBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnCE,EAAqDD,GAEhEE,MAACL,GAAsB,SAAUG,EAAM,SACtC,SAAAG,EAAAA,KAACC,EAAAA,gBAAA,CAAiB,GAAGJ,EACpB,SAAA,CAAAE,MAAC,MAAA,CACA,SAAAA,EAAAA,IAACG,EAAAA,WAAA,CACA,KAAML,EAAM,aAAeM,EAAAA,QAAqBC,EAAAA,QAChD,SAAU,CAACP,GAAO,UAAA,CAAA,EAEpB,EACCA,EAAM,SAAWE,MAAC,MAAA,CAAI,UAAU,WAAW,EAAS,IAAA,CAAA,CACtD,CAAA,CACD,EAIFD,EAAiB,YAAc"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/dropdown/MenuItem/MenuItem.tsx"],"sourcesContent":["import HorizontalMoreIcon from '@src/assets/icons/horizontal_dots.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { COLORS } from '../../../constants/Theme';\nimport { DropdownPopover } from '../DropdownPopover';\nimport { OpenDropdownProps } from '../type';\n\nexport type MenuItemDropdownProps = OpenDropdownProps & {\n\tisHorizontal: boolean;\n\tchildren?: React.ReactNode;\n\thideBorder?: boolean;\n\tisNewTag?: boolean;\n};\n\nconst MenuItemDropdownStyle = styled.div<{ isNewTag?: boolean }>`\n\t:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\tposition: ${(props) => (props.isNewTag ? 'relative' : '')};\n\t.new--tag {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -8px;\n\t\ttop: -5px;\n\t\tborder-radius: 50%;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1.25px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n`;\n\nexport const MenuItemDropdown: React.FC<MenuItemDropdownProps> = (props) => {\n\treturn (\n\t\t<MenuItemDropdownStyle isNewTag={props.isNewTag}>\n\t\t\t<DropdownPopover {...props}>\n\t\t\t\t<div>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={props.isHorizontal ? HorizontalMoreIcon : MoreIcon}\n\t\t\t\t\t\tbordered={!props?.hideBorder}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{props.isNewTag ? <div className=\"new--tag\"></div> : null}\n\t\t\t</DropdownPopover>\n\t\t</MenuItemDropdownStyle>\n\t);\n};\n\nMenuItemDropdown.displayName = 'MenuItemDropdown';\n"],"names":["MenuItemDropdownStyle","styled","COLORS","props","MenuItemDropdown","jsx","jsxs","DropdownPopover","IconButton","HorizontalMoreIcon","MoreIcon"],"mappings":"ocAgBMA,EAAwBC,EAAAA,QAAO;AAAA;AAAA,gBAErBC,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,aAExBC,GAAWA,EAAM,SAAW,WAAa,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1CD,SAAO,WAAW,SAAS,OAAO;AAAA,yBACzBA,EAAAA,OAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnCE,EAAqDD,GAEhEE,MAACL,GAAsB,SAAUG,EAAM,SACtC,SAAAG,EAAAA,KAACC,EAAAA,gBAAA,CAAiB,GAAGJ,EACpB,SAAA,CAAAE,MAAC,MAAA,CACA,SAAAA,EAAAA,IAACG,EAAAA,WAAA,CACA,KAAML,EAAM,aAAeM,EAAAA,QAAqBC,EAAAA,QAChD,SAAU,CAACP,GAAO,UAAA,CAAA,EAEpB,EACCA,EAAM,SAAWE,MAAC,MAAA,CAAI,UAAU,WAAW,EAAS,IAAA,CAAA,CACtD,CAAA,CACD,EAIFD,EAAiB,YAAc"}

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),Ke=require("../../../../assets/icons/errorInfo.svg.js"),Ve=require("../../../../assets/icons/refresh-purple.svg.js"),o=require("react"),$e=require("../../../zeroState/ZeroState.js"),ze=require("../../../../hooks/useOutside.js"),R=require("../../../../constants/Theme.js"),Ne=require("../../hooks/useDropdown.js"),_e=require("./description/Description.js"),Ge=require("./menu/FreeFormMenu.js"),Je=require("./menu/MenuList.js"),Qe=require("./menu/SelectAllMenu.js"),Xe=require("./multiSelect/MultiSelectDropdownBottomBar.js"),ne=require("./OpennedDropdown.styled.js"),Ye=require("./searchbox/SearchBox.js"),et=require("./searchbox/SearchZeroState.js"),$={height:304,width:290},tt=({options:q,isSearchable:g,searchPlaceholder:se,staticMenuHeight:z,isMultiSelect:i,maxSelections:C,width:F,allowFreeForm:N,height:oe,onClose:_,onSelect:re,onSearch:d,version:l,skipSorting:ue,headerRef:ce,hideSelectAll:ie,primaryButtonText:le,onInfiniteScroll:ae,onMultiSelectClear:de,onDropdownItemClick:E,buttonOptions:fe,isSearchLoading:he,isOptionsLoading:pe,optionsErrorState:w,disableSearchOptions:ge,disableSearchedOptionExcept:we,useDefaultCursor:ye,containerStyle:Oe={},zeroState:A=void 0,isDraggable:y=!1,onOptionsReorder:O,hideClearButton:xe=!1,showCheckboxForCustomElement:me=!1,checkboxActiveColor:B,brandSelectedRow:W})=>{const v=o.useCallback(e=>{if(!y||!i)return e;const t=[],n=[];return e.forEach(u=>{u.options?n.push(u):u.selected?t.push(u):n.push(u)}),[...t,...n]},[y,i]),[j,G]=o.useState(()=>v(q)),J=o.useRef(j),Q=o.useRef(!1),H=o.useRef(O);o.useEffect(()=>{G(v(q))},[q,v]),o.useEffect(()=>{J.current=j},[j]),o.useEffect(()=>{H.current=O},[O]),o.useEffect(()=>()=>{Q.current&&H.current&&H.current(J.current)},[]);const Se=o.useCallback(e=>{G(e),l==="2.0"?O?.(e):Q.current=!0},[O,l]),be=y?j:q,{dropdownOptions:f,search:Le,searchedString:s,searchedOptions:x,searchError:Te,retrySearch:Re,onApplyHandler:M,selectAllHandler:qe,onMultiSelectClear:Ce,onFreeFormSelect:Ee,onMultiSelectApply:je,latestDropdownOptionsRef:ke,getSelectedOptions:De,getCurrentSelectionCount:Ie}=Ne.useDropdown(l,be,re,ue||y,i,d,ge,we,C),[Fe,Z]=o.useState(F??$.width),[h,U]=o.useState(null),[k,X]=o.useState(-1),m=o.useRef(null),Y=o.useRef([]),P=o.useRef(null);ze.useOutside(m,()=>{if(U(null),i&&l==="2.0"){const e=De(ke.current);_?.(e)}else _?.(f)},[ce,Y]),o.useEffect(()=>{const e=setTimeout(()=>{m.current&&m.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]);const Ae=e=>{const t=[];return e.forEach(n=>{if(n.options)n.options.forEach(r=>{r.disabled||t.push(r)});else{const u=n;u.disabled||t.push(u)}}),t};o.useEffect(()=>{const e=n=>{const r=Ae(s&&d?x:f);if(r.length!==0){if(n.key==="ArrowDown")n.preventDefault(),X(a=>{const L=a<r.length-1?a+1:0;return setTimeout(()=>{const T=P.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="ArrowUp")n.preventDefault(),X(a=>{const L=a>0?a-1:r.length-1;return setTimeout(()=>{const T=P.current?.querySelector(`[data-option-index="${L}"]`);T&&T.scrollIntoView({block:"nearest",behavior:"smooth"})},0),L});else if(n.key==="Enter"&&k>=0){n.preventDefault();const a=r[k];a&&(M({...a,selected:!a.selected}),E&&E(a))}}},t=m.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[k,s,x,f,d,M,E]);const p=oe??$.height,D=typeof p=="number"?g&&i?p-96:g&&!i||!g&&i?p-48:p:p;function Be(e,t){U(e&&t?{title:e,description:t}:null)}o.useEffect(()=>{const e=F??$.width;if(h===null)Z(e);else if(typeof e=="number")Z(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;Z(t)}},[h]);const I=[],K=(e=>{if(!i||!C&&C!==0)return e;const n=Ie(f)>=C;return n?e.map(u=>{if(u.options)return{...u,options:u.options.map(r=>({...r,disabled:r.disabled||!r.selected&&n}))};{const r=u;return{...r,disabled:r.disabled||!r.selected&&n}}}):e})((s&&d?x:f).map(e=>{if(s&&!d)if(e.options){const t={...e};return t.options=t.options.filter(n=>n.label?.toLowerCase().includes(s.toLowerCase())?(I.push(!s||n.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(I.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),V=!!g&&s&&K.length===0,S=!s&&!!pe,b=!s&&!!w&&!S,We=!s&&!K.length&&!S&&!b,ee=S||b||We,ve=A?.title||"No results found",He=A?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",Me=w?.title||"Failed to load options",Ze=w?.subTitle||"Something went wrong while fetching the list. Please try again",Ue={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:R.COLORS.background.inverseLight,customIconColor:R.COLORS.background.inverseLight,LeadingIcon:Ve.default},te={IconHolderStyle:{background:R.COLORS.background.negative.light},Icon:c.jsx(Ke.default,{color:R.COLORS.content.negative,width:24,height:24}),...w};te.actionButton={...Ue,...w?.actionButton??{}};const Pe=S?void 0:b?te:A;return c.jsxs(ne.OpennedDropdownContainer,{version:l,ref:m,tabIndex:-1,style:{width:Fe,...Oe,outline:"none"},children:[c.jsxs("div",{style:{width:h?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!g&&c.jsx(Ye.SearchBox,{onSearch:Le,version:l,placeholder:se}),ee?c.jsx("div",{"data-testid":"dropdown-options-zero-state",style:{height:z?D:p,display:"flex",background:R.COLORS.background.base},children:c.jsx($e.ZeroState,{...Pe??{},isLoading:S,title:b?Me:ve,subTitle:b?Ze:He})}):c.jsxs(ne.MenuListContainer,{"data-testid":"dropdown-menu-list",minHeight:z?D:void 0,maxHeight:D,ref:P,children:[!!i&&!V&&!ie&&c.jsx(Qe.SelectAllMenu,{version:l,options:s&&d?x:f,onSelect:qe,checkboxActiveColor:B,brandSelectedRow:W}),!N&&V&&c.jsx(et.SearchZeroState,{isLoading:he,errorMessage:Te,onRetry:Re,height:D,searchedString:s,containerWidth:F,version:l}),N&&(V||!!I.length&&I.every(e=>e===!1))&&c.jsx(Ge.FreeFormMenu,{version:l,isMultiSelect:i,onSelect:Ee,searchedString:s,checkboxActiveColor:B,brandSelectedRow:W}),c.jsx(Je.MenuList,{onInfiniteScroll:ae,onDropdownItemClick:E,version:l,onSelect:M,showDescription:Be,isMultiSelect:i,options:K,useDefaultCursor:ye,ref:Y,focusedIndex:k,isDraggable:y,onOptionsReorder:Se,showCheckboxForCustomElement:me,checkboxActiveColor:B,brandSelectedRow:W})]}),!!i&&!ee&&l!=="2.0"&&c.jsx(Xe.default,{onClear:()=>{Ce(),de?.()},onApply:je,list:s&&d?x:f,buttonText:le,buttonOptions:fe,hideClearButton:xe})]}),!!h&&c.jsx(_e.Description,{title:h.title,description:h.description,version:l})]})};exports.OpenedDropdown=tt;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),Qe=require("../../../../assets/icons/errorInfo.svg.js"),Xe=require("../../../../assets/icons/refresh-purple.svg.js"),n=require("react"),Ye=require("../../../zeroState/ZeroState.js"),et=require("../../../../hooks/useOutside.js"),C=require("../../../../constants/Theme.js"),tt=require("../../hooks/useDropdown.js"),Q=require("../utils/iterationOnOptions.js"),nt=require("./description/Description.js"),st=require("./menu/FreeFormMenu.js"),rt=require("./menu/MenuList.js"),ot=require("./menu/SelectAllMenu.js"),ct=require("./multiSelect/MultiSelectDropdownBottomBar.js"),ie=require("./OpennedDropdown.styled.js"),ut=require("./searchbox/SearchBox.js"),lt=require("./searchbox/SearchZeroState.js"),X={height:304,width:290},it=({options:f,isSearchable:x,searchPlaceholder:de,staticMenuHeight:Y,isMultiSelect:l,maxSelections:E,width:B,allowFreeForm:ee,height:ae,onClose:te,onSelect:fe,onSearch:h,version:i,skipSorting:he,headerRef:pe,hideSelectAll:ge,primaryButtonText:we,onInfiniteScroll:Oe,onMultiSelectClear:xe,onDropdownItemClick:j,buttonOptions:Se,isSearchLoading:me,isOptionsLoading:ye,optionsErrorState:S,disableSearchOptions:Te,disableSearchedOptionExcept:be,useDefaultCursor:Re,containerStyle:qe={},zeroState:W=void 0,isDraggable:m=!1,onOptionsReorder:y,hideClearButton:Le=!1,showCheckboxForCustomElement:Ce=!1,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p,collapsibleChildren:k,defaultCollapsed:U,hideSelectedCount:Ee})=>{const Z=n.useCallback(e=>{if(!m||!l)return e;const t=[],r=[];return e.forEach(d=>{d.options?r.push(d):d.selected?t.push(d):r.push(d)}),[...t,...r]},[m,l]),[D,ne]=n.useState(()=>Z(f)),se=n.useRef(D),re=n.useRef(!1),V=n.useRef(y);n.useEffect(()=>{ne(Z(f))},[f,Z]),n.useEffect(()=>{se.current=D},[D]),n.useEffect(()=>{V.current=y},[y]),n.useEffect(()=>()=>{re.current&&V.current&&V.current(se.current)},[]);const je=n.useCallback(e=>{ne(e),i==="2.0"?y?.(e):re.current=!0},[y,i]),ke=m?D:f,{dropdownOptions:g,search:De,searchedString:s,searchedOptions:T,searchError:Ie,retrySearch:Fe,onApplyHandler:v,selectAllHandler:Pe,onMultiSelectClear:Ae,onFreeFormSelect:Be,onMultiSelectApply:We,latestDropdownOptionsRef:He,getSelectedOptions:Me,getCurrentSelectionCount:Ue}=tt.useDropdown(i,ke,fe,he||m,l,h,Te,be,E,p),[Ze,N]=n.useState(B??X.width),[w,K]=n.useState(null),[I,$]=n.useState(-1),[F,oe]=n.useState(()=>k&&U?Q.getNestedParentValues(f):[]),z=n.useRef(F);n.useEffect(()=>{if(!k||!U)return;const e=Q.getNestedParentValues(f).filter(t=>!z.current.includes(t));e.length&&(z.current=[...z.current,...e],oe(t=>[...t,...e]))},[f,k,U]);const Ve=e=>{oe(t=>t.includes(e)?t.filter(r=>r!==e):[...t,e]),$(-1)},b=n.useRef(null),ce=n.useRef([]),_=n.useRef(null);et.useOutside(b,()=>{if(K(null),l&&i==="2.0"){const e=Me(He.current);te?.(e)}else te?.(g)},[pe,ce]),n.useEffect(()=>{const e=setTimeout(()=>{b.current&&b.current.focus({preventScroll:!0})},0);return()=>clearTimeout(e)},[]),n.useEffect(()=>{const e=r=>{const d=s&&h?T:g,a=Q.flattenSelectableOptions(d,p==="nested"?{collapsedParents:F}:void 0);if(a.length!==0){if(r.key==="ArrowDown")r.preventDefault(),$(o=>{const c=o<a.length-1?o+1:0;return setTimeout(()=>{const L=_.current?.querySelector(`[data-option-index="${c}"]`);L&&L.scrollIntoView({block:"nearest",behavior:"smooth"})},0),c});else if(r.key==="ArrowUp")r.preventDefault(),$(o=>{const c=o>0?o-1:a.length-1;return setTimeout(()=>{const L=_.current?.querySelector(`[data-option-index="${c}"]`);L&&L.scrollIntoView({block:"nearest",behavior:"smooth"})},0),c});else if(r.key==="Enter"&&I>=0){r.preventDefault();const o=a[I];o&&(v({...o,selected:!o.selected}),j&&j(o))}}},t=b.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}},[I,s,T,g,h,v,j,p,F]);const O=ae??X.height,P=typeof O=="number"?x&&l?O-96:x&&!l||!x&&l?O-48:O:O;function ve(e,t){K(e&&t?{title:e,description:t}:null)}n.useEffect(()=>{const e=B??X.width;if(w===null)N(e);else if(typeof e=="number")N(e*2);else if(typeof e=="string"&&e.endsWith("px")){const t=parseInt(e.replace("px",""))*2;N(t)}},[w]);const A=[],G=(e=>{if(!l||!E&&E!==0)return e;const r=Ue(g)>=E;return r?e.map(d=>{if(d.options)return{...d,options:d.options.map(c=>({...c,disabled:c.disabled||!c.selected&&r}))};const a=c=>({...c,disabled:c.disabled||!c.selected}),o=a(d);return p==="nested"&&o.children?.length?{...o,children:o.children.map(a)}:o}):e})((s&&h?T:g).map(e=>{if(s&&!h)if(e.options){const t={...e};return t.options=t.options.filter(r=>r.label?.toLowerCase().includes(s.toLowerCase())?(A.push(!s||r.label===s),!0):!1),t.options.length>0?t:null}else return e.label?.toLowerCase().includes(s.toLowerCase())||e.searchKey?.toLowerCase().includes(s.toLowerCase())?(A.push(!s||e.label===s),e):null;return e}).filter(e=>e!==null)),J=!!x&&s&&G.length===0,R=!s&&!!ye,q=!s&&!!S&&!R,Ne=!s&&!G.length&&!R&&!q,ue=R||q||Ne,Ke=W?.title||"No results found",$e=W?.subTitle||"Please try again later or contact us at support@bik.ai if you require further assistance.",ze=S?.title||"Failed to load options",_e=S?.subTitle||"Something went wrong while fetching the list. Please try again",Ge={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:C.COLORS.background.inverseLight,customIconColor:C.COLORS.background.inverseLight,LeadingIcon:Xe.default},le={IconHolderStyle:{background:C.COLORS.background.negative.light},Icon:u.jsx(Qe.default,{color:C.COLORS.content.negative,width:24,height:24}),...S};le.actionButton={...Ge,...S?.actionButton??{}};const Je=R?void 0:q?le:W;return u.jsxs(ie.OpennedDropdownContainer,{version:i,ref:b,tabIndex:-1,style:{width:Ze,...qe,outline:"none"},children:[u.jsxs("div",{style:{width:w?"50%":"100%",display:"flex",flexDirection:"column",background:"white"},children:[!!x&&u.jsx(ut.SearchBox,{onSearch:De,version:i,placeholder:de}),ue?u.jsx("div",{"data-testid":"dropdown-options-zero-state",style:{height:Y?P:O,display:"flex",background:C.COLORS.background.base},children:u.jsx(Ye.ZeroState,{...Je??{},isLoading:R,title:q?ze:Ke,subTitle:q?_e:$e})}):u.jsxs(ie.MenuListContainer,{"data-testid":"dropdown-menu-list",minHeight:Y?P:void 0,maxHeight:P,ref:_,children:[!!l&&!J&&!ge&&u.jsx(ot.SelectAllMenu,{version:i,options:s&&h?T:g,onSelect:Pe,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p}),!ee&&J&&u.jsx(lt.SearchZeroState,{isLoading:me,errorMessage:Ie,onRetry:Fe,height:P,searchedString:s,containerWidth:B,version:i}),ee&&(J||!!A.length&&A.every(e=>e===!1))&&u.jsx(st.FreeFormMenu,{version:i,isMultiSelect:l,onSelect:Be,searchedString:s,checkboxActiveColor:H,brandSelectedRow:M}),u.jsx(rt.MenuList,{onInfiniteScroll:Oe,onDropdownItemClick:j,version:i,onSelect:v,showDescription:ve,isMultiSelect:l,options:G,useDefaultCursor:Re,ref:ce,focusedIndex:I,isDraggable:m,onOptionsReorder:je,showCheckboxForCustomElement:Ce,checkboxActiveColor:H,brandSelectedRow:M,childrenLayout:p,collapsibleChildren:k,collapsedParents:F,onToggleCollapsed:Ve})]}),!!l&&!ue&&i!=="2.0"&&u.jsx(ct.default,{onClear:()=>{Ae(),xe?.()},onApply:We,list:s&&h?T:g,buttonText:we,buttonOptions:Se,hideClearButton:Le,hideSelectedCount:Ee,childrenLayout:p})]}),!!w&&u.jsx(nt.Description,{title:w.title,description:w.description,version:i})]})};exports.OpenedDropdown=it;
 //# sourceMappingURL=OpennedDropdown.js.map