@bikdotai/bik-component-library 0.0.821-beta.9 → 0.0.821

package/dist/cjs/components/checkBox/CheckBox.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyCaption,\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n\tlabelTypography?:\n\t\t| 'bodyCaption'\n\t\t| 'bodySecondary'\n\t\t| 'bodyPrimary'\n\t\t| 'titleSmall';\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tsize?: 'DEFAULT' | 'SMALL' | 'XS';\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\t// Box (and inner check) dimensions per size — XS renders a 12x12 mark.\n\tconst dims =\n\t\tprops.size === 'XS'\n\t\t\t? {\n\t\t\t\t\tbox: 12,\n\t\t\t\t\tcheck: { w: 6, h: 5, x: 3, y: 3.5 },\n\t\t\t\t\tpartial: { x: 3, y: 5, w: 6 },\n\t\t\t  }\n\t\t\t: props.size === 'SMALL'\n\t\t\t? {\n\t\t\t\t\tbox: 16,\n\t\t\t\t\tcheck: { w: 8, h: 7, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 7, w: 6 },\n\t\t\t  }\n\t\t\t: {\n\t\t\t\t\tbox: 18,\n\t\t\t\t\tcheck: { w: 10, h: 9, x: 4, y: 4 },\n\t\t\t\t\tpartial: { x: 5, y: 8, w: 8 },\n\t\t\t  };\n\n\treturn (\n\t\t<svg\n\t\t\twidth={dims.box}\n\t\t\theight={dims.box}\n\t\t\tviewBox={`0 0 ${dims.box} ${dims.box}`}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={dims.box}\n\t\t\t\theight={dims.box}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={dims.check.w}\n\t\t\t\t\theight={dims.check.h}\n\t\t\t\t\tx={dims.check.x}\n\t\t\t\t\ty={dims.check.y}\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx={dims.partial.x}\n\t\t\t\t\ty={dims.partial.y}\n\t\t\t\t\twidth={dims.partial.w}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif (props.labelTypography) {\n\t\t\tconst LabelTypography = {\n\t\t\t\tbodyCaption: BodyCaption,\n\t\t\t\tbodySecondary: BodySecondary,\n\t\t\t\tbodyPrimary: BodyPrimary,\n\t\t\t\ttitleSmall: TitleSmall,\n\t\t\t}[props.labelTypography];\n\t\t\treturn (\n\t\t\t\t<LabelTypography\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</LabelTypography>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'XS') {\n\t\t\treturn (\n\t\t\t\t<BodyCaption\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodyCaption>\n\t\t\t);\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","dims","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}
+{"version":3,"file":"CheckBox.js","sources":["../../../../src/components/checkBox/CheckBox.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react';\nimport {\n\tCheckboxContainer,\n\tCheckboxIcon,\n} from '@src/components/checkBox/CheckBox.styled';\nimport {\n\tBodyPrimary,\n\tBodySecondary,\n\tTitleRegular,\n\tTitleSmall,\n} from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport type CheckBoxProps = {\n\tisChecked: boolean;\n\tisPartiallyChecked?: boolean;\n\tisDisabled?: boolean;\n\tvalue?: string;\n\tonValueChange: (\n\t\tchecked: boolean,\n\t\tvalue?: string,\n\t\tevent?: React.MouseEvent,\n\t) => void;\n\tlabel?: string;\n\tsize?: 'DEFAULT' | 'SMALL';\n\tskipHoverState?: boolean;\n\tlabelSize?: 'DEFAULT' | 'SMALL';\n\trightComponent?: JSX.Element;\n\tcheckboxBorderColor?: string;\n\tboldOnChecked?: boolean;\n\tbold?: boolean;\n\tstyle?: React.CSSProperties;\n\tenableHover?: boolean;\n\tactiveColor?: string;\n};\n\nconst CheckMark: React.FC<{\n\tisPartial: boolean;\n\tisDisabled: boolean;\n\tisSmall: boolean;\n\tactiveColor?: string;\n}> = (props) => {\n\tconst fillColor = useMemo(\n\t\t() => props.activeColor || COLORS.background.positive.vibrant,\n\t\t[props.activeColor],\n\t);\n\n\treturn (\n\t\t<svg\n\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\tviewBox={props.isSmall ? '0 0 16 16' : '0 0 18 18'}\n\t\t\tfill=\"none\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<rect\n\t\t\t\tx=\"0\"\n\t\t\t\ty=\"0\"\n\t\t\t\twidth={props.isSmall ? '16' : '18'}\n\t\t\t\theight={props.isSmall ? '16' : '18'}\n\t\t\t\trx=\"4\"\n\t\t\t\tfill={props.isDisabled ? COLORS.content.inactive : fillColor}\n\t\t\t/>\n\t\t\t{!props.isPartial && (\n\t\t\t\t<svg\n\t\t\t\t\twidth={props.isSmall ? '8' : '10'}\n\t\t\t\t\theight={props.isSmall ? '7' : '9'}\n\t\t\t\t\tx=\"4\"\n\t\t\t\t\ty=\"4\"\n\t\t\t\t\tviewBox=\"0 0 10 9\"\n\t\t\t\t\tfill=\"none\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t>\n\t\t\t\t\t<path\n\t\t\t\t\t\tfillRule=\"evenodd\"\n\t\t\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\t\t\td=\"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z\"\n\t\t\t\t\t\tfill=\"white\"\n\t\t\t\t\t/>\n\t\t\t\t</svg>\n\t\t\t)}\n\t\t\t{props.isPartial && (\n\t\t\t\t<rect\n\t\t\t\t\tx=\"5\"\n\t\t\t\t\ty={props.isSmall ? '7' : '8'}\n\t\t\t\t\twidth={props.isSmall ? '6' : '8'}\n\t\t\t\t\theight=\"2\"\n\t\t\t\t\trx=\"1\"\n\t\t\t\t\tfill={COLORS.surface.standard}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</svg>\n\t);\n};\n\nexport const CheckBox: React.FC<CheckBoxProps> = (props) => {\n\tconst [isChecked, setIsChecked] = useState(props.isChecked || false);\n\tconst [isPartiallyChecked, setIsPartiallyChecked] = useState(\n\t\tprops.isPartiallyChecked || false,\n\t);\n\tconst [isDisabled, setIsDisabled] = useState(props.isDisabled || false);\n\tconst [isHovered, setIsHovered] = useState(false);\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\tif (!props.isDisabled) {\n\t\t\tconst newVal = !isChecked;\n\t\t\tif (isPartiallyChecked) {\n\t\t\t\tsetIsPartiallyChecked(!isPartiallyChecked);\n\t\t\t} else {\n\t\t\t\tsetIsChecked(newVal);\n\t\t\t}\n\t\t\tprops.onValueChange?.(newVal, props.value, event);\n\t\t}\n\t};\n\n\tuseEffect(() => {\n\t\tsetIsChecked(props.isChecked);\n\t}, [props.isChecked]);\n\n\tuseEffect(() => {\n\t\tsetIsDisabled(props.isDisabled || false);\n\t}, [props.isDisabled]);\n\n\tuseEffect(() => {\n\t\tsetIsPartiallyChecked(props.isPartiallyChecked || false);\n\t}, [props.isPartiallyChecked]);\n\n\tconst renderLabel = () => {\n\t\tif (!props.label) {\n\t\t\treturn <></>;\n\t\t}\n\n\t\tif ((props.boldOnChecked && isChecked) || props.bold) {\n\t\t\tif (props.labelSize === 'DEFAULT') {\n\t\t\t\treturn (\n\t\t\t\t\t<TitleRegular\n\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\tprops.isDisabled ? COLORS.text.disabled : COLORS.text.primary\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props.label}\n\t\t\t\t\t</TitleRegular>\n\t\t\t\t);\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<TitleSmall\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</TitleSmall>\n\t\t\t);\n\t\t}\n\n\t\tif (props.size === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\tif (props.labelSize === 'SMALL') {\n\t\t\treturn (\n\t\t\t\t<BodySecondary\n\t\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t\t>\n\t\t\t\t\t{props.label}\n\t\t\t\t</BodySecondary>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<BodyPrimary\n\t\t\t\tcolor={props.isDisabled ? COLORS.text.disabled : COLORS.text.primary}\n\t\t\t>\n\t\t\t\t{props.label}\n\t\t\t</BodyPrimary>\n\t\t);\n\t};\n\n\treturn (\n\t\t<CheckboxContainer\n\t\t\tonClick={handleCheck}\n\t\t\tonMouseEnter={() => setIsHovered(!props.skipHoverState)}\n\t\t\tonMouseLeave={() => setIsHovered(false)}\n\t\t\tonMouseDown={() => setIsClicked(!props.skipHoverState)}\n\t\t\tonMouseUp={() => setIsClicked(false)}\n\t\t\tisDisabled={isDisabled}\n\t\t\tenableHover={props.enableHover}\n\t\t\tstyle={props.style ?? {}}\n\t\t>\n\t\t\t<CheckboxIcon\n\t\t\t\tchecked={isChecked}\n\t\t\t\thovered={isHovered}\n\t\t\t\tclicked={isClicked}\n\t\t\t\tisDisabled={isDisabled}\n\t\t\t\tsize={props.size}\n\t\t\t\tborderColor={props.checkboxBorderColor}\n\t\t\t>\n\t\t\t\t{isChecked && (\n\t\t\t\t\t<CheckMark\n\t\t\t\t\t\tisPartial={isPartiallyChecked || false}\n\t\t\t\t\t\tisDisabled={isDisabled}\n\t\t\t\t\t\tisSmall={props.size === 'SMALL'}\n\t\t\t\t\t\tactiveColor={props?.activeColor}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</CheckboxIcon>\n\t\t\t{renderLabel()}\n\t\t\t{props.rightComponent}\n\t\t</CheckboxContainer>\n\t);\n};\n"],"names":["CheckMark","props","fillColor","useMemo","COLORS","jsxs","jsx","CheckBox","isChecked","setIsChecked","useState","isPartiallyChecked","setIsPartiallyChecked","isDisabled","setIsDisabled","isHovered","setIsHovered","isClicked","setIsClicked","handleCheck","event","newVal","useEffect","renderLabel","TitleRegular","TitleSmall","BodySecondary","BodyPrimary","Fragment","CheckboxContainer","CheckboxIcon"],"mappings":"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"}

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

@@ -1,42 +1,41 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("styled-components"),t=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(i),d=o.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("styled-components"),i=require("../../constants/Theme.js"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(t),c=o.default.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
 	cursor: ${e=>e.isDisabled?"default":"pointer"};
-	${e=>e.enableHover&&i.css`
+	${e=>e.enableHover&&t.css`
 			:hover {
-				background: ${t.COLORS.surface.subdued};
+				background: ${i.COLORS.surface.subdued};
 			}
 		`}
-`,c=o.default.div`
-	width: ${e=>e.size==="DEFAULT"?14:12}px;
-	height: ${e=>e.size==="DEFAULT"?14:12}px;
+`,d=o.default.div`
+	width: ${e=>e.size==="SMALL"?12:14}px;
+	height: ${e=>e.size==="SMALL"?12:14}px;
 	border-radius: 4px;
 	border: 2px solid black;
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */
-	box-sizing: ${e=>e.size==="XS"?"border-box":"content-box"};
-	${e=>e.isDisabled?i.css`
-					border: ${e.size==="DEFAULT"?2:1.5}px solid
-						${t.COLORS.content.inactive};
-			  `:i.css`
-					border: ${e.size==="DEFAULT"?2:1.5}px solid
+	box-sizing: content-box;
+	${e=>e.isDisabled?t.css`
+					border: ${e.size==="SMALL"?1.5:2}px solid
+						${i.COLORS.content.inactive};
+			  `:t.css`
+					border: ${e.size==="SMALL"?1.5:2}px solid
 						${e.borderColor??"black"};
 			  `}
-	${e=>e.checked&&i.css`
+	${e=>e.checked&&t.css`
 			border: 0px;
-			width: ${e.size==="XS"?12:18}px;
-			height: ${e.size==="XS"?12:18}px;
+			width: 18px;
+			height: 18px;
 		`}
-	${e=>e.hovered&&i.css`
-			outline: 3px solid ${t.COLORS.surface.hovered};
+	${e=>e.hovered&&t.css`
+			outline: 3px solid ${i.COLORS.surface.hovered};
 		`}
-	${e=>e.clicked&&!e.isDisabled&&i.css`
+	${e=>e.clicked&&!e.isDisabled&&t.css`
 			outline: 3px solid
-				${e.checked?t.COLORS.stroke.positive.lightAlt:t.COLORS.surface.hovered};
+				${e.checked?i.COLORS.stroke.positive.lightAlt:i.COLORS.surface.hovered};
 			outline-offset: 2px;
 		`}
-`;exports.CheckboxContainer=d;exports.CheckboxIcon=c;
+`;exports.CheckboxContainer=c;exports.CheckboxIcon=d;
 //# sourceMappingURL=CheckBox.styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\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}>`\n\twidth: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\theight: ${(props) => (props.size === 'DEFAULT' ? 14 : 12)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\t/* XS is a true 12x12 box (border drawn inside); other sizes keep content-box. */\n\tbox-sizing: ${(props) => (props.size === 'XS' ? 'border-box' : 'content-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\twidth: ${props.size === 'XS' ? 12 : 18}px;\n\t\t\theight: ${props.size === 'XS' ? 12 : 18}px;\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? 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"],"mappings":"0NAGaA,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,UAQxBC,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA,WAC7CA,GAAWA,EAAM,OAAS,UAAY,GAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO1CA,GAAWA,EAAM,OAAS,KAAO,aAAe,aAAc;AAAA,GAC1EA,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,YAEUD,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,aAC5BA,EAAM,OAAS,KAAO,GAAK,EAAE;AAAA,GACvC;AAAA,GACCA,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,QACLE,EAAAA,OAAO,OAAO,SAAS,SACvBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}
+{"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\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';\n\tborderColor?: string;\n}>`\n\twidth: ${(props) => (props.size === 'SMALL' ? 12 : 14)}px;\n\theight: ${(props) => (props.size === 'SMALL' ? 12 : 14)}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: content-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'SMALL' ? 1.5 : 2}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 === 'SMALL' ? 1.5 : 2}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\twidth: 18px;\n\t\t\theight: 18px;\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? 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"],"mappings":"0NAGaA,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,UAQxBC,GAAWA,EAAM,OAAS,QAAU,GAAK,EAAG;AAAA,WAC3CA,GAAWA,EAAM,OAAS,QAAU,GAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOpDA,GACFA,EAAM,WACHC,EAAAA;AAAAA,eACUD,EAAM,OAAS,QAAU,IAAM,CAAC;AAAA,QACvCE,EAAAA,OAAO,QAAQ,QAAQ;AAAA,OAE1BD,EAAAA;AAAAA,eACUD,EAAM,OAAS,QAAU,IAAM,CAAC;AAAA,QACvCA,EAAM,aAAe,OAAO;AAAA,MAC9B;AAAA,GACFA,GACFA,EAAM,SACNC,EAAAA;AAAAA;AAAAA;AAAAA;AAAAA,GAIC;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,QACLE,EAAAA,OAAO,OAAO,SAAS,SACvBA,EAAAA,OAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA"}

package/dist/cjs/components/country-code-picker/CountryCodePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0' | '3.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\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{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\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{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"2YAgBaA,EAePC,GAAU,CACf,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAK7CH,EAAM,iBAAmB,CACxB,KAAM,QACN,KAAM,MACN,KAAM,IAAA,CACP,EAEKI,EAAe,uBAAuBH,EAAgB,MAAM,aAAa,OAE/EI,EAAAA,UAAU,IAAM,CACXL,EAAM,iBACTE,EAAmBF,EAAM,eAAe,CAE1C,EAAG,CAACA,EAAM,iBAAiB,IAAI,CAAC,EAEhC,MAAMM,EAAoB,IAClBC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,4BAAA,CACC,SAAA,CAAA,CAACV,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKF,EACL,UAAU,uBACV,IAAKD,EAAQ,IAAA,CAAA,SAIdI,EAAAA,cAAA,CAAc,MAAOZ,EAAM,kBAAoB,CAAA,EAC/C,SAAA,CAAAW,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,EAET,KACDG,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAED,SAAUP,EAAgB,OAASO,EAAQ,IAAA,CAE7C,CAAC,EAGF,OACCG,EAAAA,IAACG,EAAAA,gBAAA,CACA,QAASd,EAAM,QACf,aAAY,GACZ,MAAOA,EAAM,cAAgB,QAC7B,UAAWA,EAAM,WAAa,eAC9B,SAAUA,EAAM,mBAAqB,WACrC,QAASM,EAAA,EACT,SAAUN,EAAM,SAChB,SAAWe,GAAW,CACrB,MAAMC,EAAiBT,EAAAA,cAAc,OACnCC,GAAYA,EAAQ,OAAUO,EAAwB,KAAA,EAExDb,EAAmBc,EAAe,CAAC,CAAC,EACpChB,EAAM,gBAAgBgB,EAAe,CAAC,CAAC,CACxC,EAEA,SAAAC,EAAAA,KAACC,EAAAA,2BAAA,CACA,OAAQlB,EAAM,OACd,MAAOA,EAAM,gBACb,QAAS,IAAM,CACd,QAAQ,IAAI,OAAO,EACnBA,EAAM,kBAAA,CACP,EAEA,SAAA,CAAAiB,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA,CAACjB,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKP,EACL,UAAU,gCACV,IAAKH,EAAgB,IAAA,CAAA,EAGvBU,MAACC,EAAAA,eAAc,MAAOZ,EAAM,kBAAoB,GAC9C,WAAgB,IAAA,CAClB,CAAA,EACD,EACAW,EAAAA,IAACQ,EAAAA,SAAS,MAAO,GAAI,OAAQ,GAAI,MAAON,EAAAA,OAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,CAAA,CACjE,CAAA,CAGH"}
+{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0';\n\tonCountrySelect: (country: CountryCode) => void;\n\tselectedCountry: CountryCode;\n\tpopoverWidth?: string;\n\theight?: string;\n\tplacement?: Placement;\n\tplacementStrategy?: PositioningStrategy;\n\tdisabled?: boolean;\n\thideFlagImage?: boolean;\n\tcontainerStyles?: React.CSSProperties;\n\tcodeColor?: string;\n\tdialColor?: string;\n\tcountryTextStyle?: React.CSSProperties;\n\tonDropdownClick?: () => void;\n}> = (props) => {\n\tconst [selectedCountry, setSelectedCountry] = useState<{\n\t\tname: string;\n\t\tdial: string;\n\t\tcode: string;\n\t}>(\n\t\tprops.selectedCountry ?? {\n\t\t\tname: 'India',\n\t\t\tdial: '+91',\n\t\t\tcode: 'IN',\n\t\t},\n\t);\n\tconst selectedFlag = `https://flagcdn.com/${selectedCountry.code?.toLowerCase()}.svg`;\n\n\tuseEffect(() => {\n\t\tif (props.selectedCountry) {\n\t\t\tsetSelectedCountry(props.selectedCountry);\n\t\t}\n\t}, [props.selectedCountry?.code]);\n\n\tconst getCountryOptions = (): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.dial,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryPickerOption>\n\t\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={flag}\n\t\t\t\t\t\t\t\tclassName=\"country-flag__option\"\n\t\t\t\t\t\t\t\talt={country.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.codeColor ?? COLORS.text.primary,\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{country.code}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{'  '}\n\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.dialColor ?? COLORS.text.primary,\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{country.dial}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t</StyledCountryPickerOption>\n\t\t\t\t),\n\t\t\t\tselected: selectedCountry.code === country.code,\n\t\t\t};\n\t\t});\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={props.version}\n\t\t\tisSearchable\n\t\t\twidth={props.popoverWidth ?? '200px'}\n\t\t\tplacement={props.placement ?? 'bottom-start'}\n\t\t\tstrategy={props.placementStrategy ?? 'absolute'}\n\t\t\toptions={getCountryOptions()}\n\t\t\tdisabled={props.disabled}\n\t\t\tonSelect={(option) => {\n\t\t\t\tconst matchingOption = CountriesData.filter(\n\t\t\t\t\t(country) => country.code === (option as SingleOption).value,\n\t\t\t\t);\n\t\t\t\tsetSelectedCountry(matchingOption[0]);\n\t\t\t\tprops.onCountrySelect(matchingOption[0]);\n\t\t\t}}\n\t\t>\n\t\t\t<StyledCountryPickerWrapper\n\t\t\t\theight={props.height}\n\t\t\t\tstyle={props.containerStyles}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tconsole.log('hello');\n\t\t\t\t\tprops.onDropdownClick?.();\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{!props.hideFlagImage && (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\tclassName=\"country-flag__selected-option\"\n\t\t\t\t\t\t\talt={selectedCountry.name}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t\t<BodySecondary style={props.countryTextStyle ?? {}}>\n\t\t\t\t\t\t{selectedCountry.dial}\n\t\t\t\t\t</BodySecondary>\n\t\t\t\t</div>\n\t\t\t\t<DownIcon width={24} height={24} color={COLORS.content.primary} />\n\t\t\t</StyledCountryPickerWrapper>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryCodePicker","props","selectedCountry","setSelectedCountry","useState","selectedFlag","useEffect","getCountryOptions","CountriesData","country","flag","StyledCountryPickerOption","jsx","BodySecondary","COLORS","DropdownPopover","option","matchingOption","jsxs","StyledCountryPickerWrapper","DownIcon"],"mappings":"2YAgBaA,EAePC,GAAU,CACf,KAAM,CAACC,EAAiBC,CAAkB,EAAIC,EAAAA,SAK7CH,EAAM,iBAAmB,CACxB,KAAM,QACN,KAAM,MACN,KAAM,IAAA,CACP,EAEKI,EAAe,uBAAuBH,EAAgB,MAAM,aAAa,OAE/EI,EAAAA,UAAU,IAAM,CACXL,EAAM,iBACTE,EAAmBF,EAAM,eAAe,CAE1C,EAAG,CAACA,EAAM,iBAAiB,IAAI,CAAC,EAEhC,MAAMM,EAAoB,IAClBC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,4BAAA,CACC,SAAA,CAAA,CAACV,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKF,EACL,UAAU,uBACV,IAAKD,EAAQ,IAAA,CAAA,SAIdI,EAAAA,cAAA,CAAc,MAAOZ,EAAM,kBAAoB,CAAA,EAC/C,SAAA,CAAAW,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,EAET,KACDG,EAAAA,IAAC,OAAA,CACA,MAAO,CACN,MAAOX,EAAM,WAAaa,EAAAA,OAAO,KAAK,OAAA,EAGtC,SAAAL,EAAQ,IAAA,CAAA,CACV,CAAA,CACD,CAAA,EACD,EAED,SAAUP,EAAgB,OAASO,EAAQ,IAAA,CAE7C,CAAC,EAGF,OACCG,EAAAA,IAACG,EAAAA,gBAAA,CACA,QAASd,EAAM,QACf,aAAY,GACZ,MAAOA,EAAM,cAAgB,QAC7B,UAAWA,EAAM,WAAa,eAC9B,SAAUA,EAAM,mBAAqB,WACrC,QAASM,EAAA,EACT,SAAUN,EAAM,SAChB,SAAWe,GAAW,CACrB,MAAMC,EAAiBT,EAAAA,cAAc,OACnCC,GAAYA,EAAQ,OAAUO,EAAwB,KAAA,EAExDb,EAAmBc,EAAe,CAAC,CAAC,EACpChB,EAAM,gBAAgBgB,EAAe,CAAC,CAAC,CACxC,EAEA,SAAAC,EAAAA,KAACC,EAAAA,2BAAA,CACA,OAAQlB,EAAM,OACd,MAAOA,EAAM,gBACb,QAAS,IAAM,CACd,QAAQ,IAAI,OAAO,EACnBA,EAAM,kBAAA,CACP,EAEA,SAAA,CAAAiB,EAAAA,KAAC,MAAA,CAAI,UAAU,mBACb,SAAA,CAAA,CAACjB,EAAM,eACPW,EAAAA,IAAC,MAAA,CACA,IAAKP,EACL,UAAU,gCACV,IAAKH,EAAgB,IAAA,CAAA,EAGvBU,MAACC,EAAAA,eAAc,MAAOZ,EAAM,kBAAoB,GAC9C,WAAgB,IAAA,CAClB,CAAA,EACD,EACAW,EAAAA,IAACQ,EAAAA,SAAS,MAAO,GAAI,OAAQ,GAAI,MAAON,EAAAA,OAAO,QAAQ,OAAA,CAAS,CAAA,CAAA,CAAA,CACjE,CAAA,CAGH"}

package/dist/cjs/components/country-code-picker/CountryPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0' | '3.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\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{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"uYAqFaA,EAA8C,CAAC,CAC3D,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,aAAAC,EAAe,QACf,OAAAC,EACA,UAAAC,EAAY,eACZ,kBAAAC,EAAoB,WACpB,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,gBAAAC,EACA,YAAAC,EAAc,mBACd,gBAAAC,EAAkB,GAClB,iBAAAC,EACA,gBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAyBC,CAA0B,EAAIC,EAAAA,SAE5Dd,CAAe,EAGXe,EAAiBf,GAAmBY,EAEpCI,EAAeD,EAClB,uBAAuBA,EAAe,MAAM,YAAA,CAAa,OACzD,OAEGE,EAAoBC,EAAAA,QAAQ,IAC1BC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,sBAAA,CACC,SAAA,CAAA,CAAChB,SACA,MAAA,CAAI,IAAKe,EAAM,UAAU,eAAe,IAAKD,EAAQ,IAAA,CAAM,EAE7DG,EAAAA,KAAC,MAAA,CAAI,UAAU,eACd,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,QACnB,GAAGhB,CAAA,EAGH,SAAAU,EAAQ,IAAA,CAAA,EAETX,GACAe,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,UACnB,SAAU,MAAA,EAGV,SAAAN,EAAQ,IAAA,CAAA,CACV,CAAA,CAEF,CAAA,EACD,EAED,SAAUL,GAAgB,OAASK,EAAQ,IAAA,CAE7C,CAAC,EACC,CAACL,GAAgB,KAAMT,EAAeG,EAAiBC,CAAgB,CAAC,EAErEiB,EAAuBC,GAAyB,CACrD,MAAMC,EAAkBV,EAAAA,cAAc,KACpCC,GAAYA,EAAQ,OAASQ,EAAO,KAAA,EAElCC,IAEC7B,IAAoB,QACvBa,EAA2BgB,CAAe,EAE3C9B,EAAgB8B,CAAe,EAEjC,EAEA,OACCL,EAAAA,IAACM,EAAAA,gBAAA,CACA,QAAAhC,EACA,aAAY,GACZ,MAAOG,EACP,UAAAE,EACA,SAAUC,EACV,QAASa,EACT,SAAAZ,EACA,SAAWuB,GAAWD,EAAoBC,CAAsB,EAEhE,SAAAL,EAAAA,KAACQ,EAAAA,6BAAA,CACA,OAAA7B,EACA,MAAOK,EACP,QAASI,EACT,SAAAN,EAEA,SAAA,CAAAmB,MAAC,MAAA,CAAI,UAAU,mBACb,SAAAT,EACAQ,EAAAA,KAAAS,WAAA,CACE,SAAA,CAAA,CAAC1B,GAAiBU,GAClBQ,EAAAA,IAAC,MAAA,CACA,IAAKR,EACL,UAAU,eACV,IAAKD,EAAe,IAAA,CAAA,EAGtBS,EAAAA,IAACC,EAAAA,cAAA,CAAc,MAAOf,EACpB,WAAe,IAAA,CACjB,CAAA,CAAA,CACD,EAEAc,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,SACnB,GAAGhB,CAAA,EAGH,SAAAF,CAAA,CAAA,EAGJ,EACAgB,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO5B,EAAWqB,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACzD,CAAA,CAAA,CACD,CAAA,CAGH"}
+{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0';\n\t/**\n\t * Callback function when a country is selected\n\t */\n\tonCountrySelect: (country: CountryCode) => void;\n\t/**\n\t * Currently selected country\n\t */\n\tselectedCountry?: CountryCode;\n\t/**\n\t * Width of the popover dropdown\n\t * @default \"300px\"\n\t */\n\tpopoverWidth?: string;\n\t/**\n\t * Height of the picker container\n\t */\n\theight?: string;\n\t/**\n\t * Placement of the dropdown relative to the trigger\n\t * @default \"bottom-start\"\n\t */\n\tplacement?: Placement;\n\t/**\n\t * Positioning strategy for the dropdown\n\t * @default \"absolute\"\n\t */\n\tplacementStrategy?: PositioningStrategy;\n\t/**\n\t * Whether the picker is disabled\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Whether to hide the flag image\n\t * @default false\n\t */\n\thideFlagImage?: boolean;\n\t/**\n\t * Custom styles for the container\n\t */\n\tcontainerStyles?: React.CSSProperties;\n\t/**\n\t * Placeholder text when no country is selected\n\t * @default \"Select a country\"\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Whether to show country code alongside name\n\t * @default true\n\t */\n\tshowCountryCode?: boolean;\n\t/**\n\t * Custom text style for the country name\n\t */\n\tcountryTextStyle?: React.CSSProperties;\n\t/**\n\t * Callback when dropdown is clicked\n\t */\n\tonDropdownClick?: () => void;\n}\n\nexport const CountryPicker: React.FC<CountryPickerProps> = ({\n\tversion,\n\tonCountrySelect,\n\tselectedCountry,\n\tpopoverWidth = '300px',\n\theight,\n\tplacement = 'bottom-start',\n\tplacementStrategy = 'absolute',\n\tdisabled = false,\n\thideFlagImage = false,\n\tcontainerStyles,\n\tplaceholder = 'Select a country',\n\tshowCountryCode = true,\n\tcountryTextStyle,\n\tonDropdownClick,\n}) => {\n\tconst [internalSelectedCountry, setInternalSelectedCountry] = useState<\n\t\tCountryCode | undefined\n\t>(selectedCountry);\n\n\t// Derive the current selected country (controlled vs uncontrolled)\n\tconst currentCountry = selectedCountry ?? internalSelectedCountry;\n\n\tconst selectedFlag = currentCountry\n\t\t? `https://flagcdn.com/${currentCountry.code?.toLowerCase()}.svg`\n\t\t: undefined;\n\n\tconst getCountryOptions = useMemo((): DropdownOption[] => {\n\t\treturn CountriesData.map((country) => {\n\t\t\tconst flag = `https://flagcdn.com/${country.code?.toLowerCase()}.svg`;\n\t\t\treturn {\n\t\t\t\tvalue: country.code,\n\t\t\t\tlabel: country.name,\n\t\t\t\tsearchKey: country.name,\n\t\t\t\tcustomComponent: (\n\t\t\t\t\t<StyledCountryOption>\n\t\t\t\t\t\t{!hideFlagImage && (\n\t\t\t\t\t\t\t<img src={flag} className=\"country-flag\" alt={country.name} />\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"country-info\">\n\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: COLORS.text.primary,\n\t\t\t\t\t\t\t\t\t...countryTextStyle,\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{country.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t{showCountryCode && (\n\t\t\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\tcolor: COLORS.text.secondary,\n\t\t\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{country.code}\n\t\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</StyledCountryOption>\n\t\t\t\t),\n\t\t\t\tselected: currentCountry?.code === country.code,\n\t\t\t};\n\t\t});\n\t}, [currentCountry?.code, hideFlagImage, showCountryCode, countryTextStyle]);\n\n\tconst handleCountrySelect = (option: SingleOption) => {\n\t\tconst matchingCountry = CountriesData.find(\n\t\t\t(country) => country.code === option.value,\n\t\t);\n\t\tif (matchingCountry) {\n\t\t\t// Only update internal state if in uncontrolled mode\n\t\t\tif (selectedCountry === undefined) {\n\t\t\t\tsetInternalSelectedCountry(matchingCountry);\n\t\t\t}\n\t\t\tonCountrySelect(matchingCountry);\n\t\t}\n\t};\n\n\treturn (\n\t\t<DropdownPopover\n\t\t\tversion={version}\n\t\t\tisSearchable\n\t\t\twidth={popoverWidth}\n\t\t\tplacement={placement}\n\t\t\tstrategy={placementStrategy}\n\t\t\toptions={getCountryOptions}\n\t\t\tdisabled={disabled}\n\t\t\tonSelect={(option) => handleCountrySelect(option as SingleOption)}\n\t\t>\n\t\t\t<StyledCountryPickerContainer\n\t\t\t\theight={height}\n\t\t\t\tstyle={containerStyles}\n\t\t\t\tonClick={onDropdownClick}\n\t\t\t\tdisabled={disabled}\n\t\t\t>\n\t\t\t\t<div className=\"content__wrapper\">\n\t\t\t\t\t{currentCountry ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{!hideFlagImage && selectedFlag && (\n\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\tsrc={selectedFlag}\n\t\t\t\t\t\t\t\t\tclassName=\"country-flag\"\n\t\t\t\t\t\t\t\t\talt={currentCountry.name}\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<BodySecondary style={countryTextStyle}>\n\t\t\t\t\t\t\t\t{currentCountry.name}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<BodySecondary\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: COLORS.text.disabled,\n\t\t\t\t\t\t\t\t...countryTextStyle,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<DownIcon\n\t\t\t\t\twidth={24}\n\t\t\t\t\theight={24}\n\t\t\t\t\tcolor={disabled ? COLORS.text.disabled : COLORS.content.primary}\n\t\t\t\t/>\n\t\t\t</StyledCountryPickerContainer>\n\t\t</DropdownPopover>\n\t);\n};\n"],"names":["CountryPicker","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","getCountryOptions","useMemo","CountriesData","country","flag","StyledCountryOption","jsxs","jsx","BodySecondary","COLORS","handleCountrySelect","option","matchingCountry","DropdownPopover","StyledCountryPickerContainer","Fragment","DownIcon"],"mappings":"uYAqFaA,EAA8C,CAAC,CAC3D,QAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,aAAAC,EAAe,QACf,OAAAC,EACA,UAAAC,EAAY,eACZ,kBAAAC,EAAoB,WACpB,SAAAC,EAAW,GACX,cAAAC,EAAgB,GAChB,gBAAAC,EACA,YAAAC,EAAc,mBACd,gBAAAC,EAAkB,GAClB,iBAAAC,EACA,gBAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAyBC,CAA0B,EAAIC,EAAAA,SAE5Dd,CAAe,EAGXe,EAAiBf,GAAmBY,EAEpCI,EAAeD,EAClB,uBAAuBA,EAAe,MAAM,YAAA,CAAa,OACzD,OAEGE,EAAoBC,EAAAA,QAAQ,IAC1BC,EAAAA,cAAc,IAAKC,GAAY,CACrC,MAAMC,EAAO,uBAAuBD,EAAQ,MAAM,aAAa,OAC/D,MAAO,CACN,MAAOA,EAAQ,KACf,MAAOA,EAAQ,KACf,UAAWA,EAAQ,KACnB,uBACEE,sBAAA,CACC,SAAA,CAAA,CAAChB,SACA,MAAA,CAAI,IAAKe,EAAM,UAAU,eAAe,IAAKD,EAAQ,IAAA,CAAM,EAE7DG,EAAAA,KAAC,MAAA,CAAI,UAAU,eACd,SAAA,CAAAC,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,QACnB,GAAGhB,CAAA,EAGH,SAAAU,EAAQ,IAAA,CAAA,EAETX,GACAe,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,UACnB,SAAU,MAAA,EAGV,SAAAN,EAAQ,IAAA,CAAA,CACV,CAAA,CAEF,CAAA,EACD,EAED,SAAUL,GAAgB,OAASK,EAAQ,IAAA,CAE7C,CAAC,EACC,CAACL,GAAgB,KAAMT,EAAeG,EAAiBC,CAAgB,CAAC,EAErEiB,EAAuBC,GAAyB,CACrD,MAAMC,EAAkBV,EAAAA,cAAc,KACpCC,GAAYA,EAAQ,OAASQ,EAAO,KAAA,EAElCC,IAEC7B,IAAoB,QACvBa,EAA2BgB,CAAe,EAE3C9B,EAAgB8B,CAAe,EAEjC,EAEA,OACCL,EAAAA,IAACM,EAAAA,gBAAA,CACA,QAAAhC,EACA,aAAY,GACZ,MAAOG,EACP,UAAAE,EACA,SAAUC,EACV,QAASa,EACT,SAAAZ,EACA,SAAWuB,GAAWD,EAAoBC,CAAsB,EAEhE,SAAAL,EAAAA,KAACQ,EAAAA,6BAAA,CACA,OAAA7B,EACA,MAAOK,EACP,QAASI,EACT,SAAAN,EAEA,SAAA,CAAAmB,MAAC,MAAA,CAAI,UAAU,mBACb,SAAAT,EACAQ,EAAAA,KAAAS,WAAA,CACE,SAAA,CAAA,CAAC1B,GAAiBU,GAClBQ,EAAAA,IAAC,MAAA,CACA,IAAKR,EACL,UAAU,eACV,IAAKD,EAAe,IAAA,CAAA,EAGtBS,EAAAA,IAACC,EAAAA,cAAA,CAAc,MAAOf,EACpB,WAAe,IAAA,CACjB,CAAA,CAAA,CACD,EAEAc,EAAAA,IAACC,EAAAA,cAAA,CACA,MAAO,CACN,MAAOC,EAAAA,OAAO,KAAK,SACnB,GAAGhB,CAAA,EAGH,SAAAF,CAAA,CAAA,EAGJ,EACAgB,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,GACP,OAAQ,GACR,MAAO5B,EAAWqB,EAAAA,OAAO,KAAK,SAAWA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CACzD,CAAA,CAAA,CACD,CAAA,CAGH"}

package/dist/cjs/components/dropdown/Dropdown.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),s=require("../../constants/Theme.js"),N=require("../../assets/icons/chevronDown.svg.js"),U=require("../input/context/InputStyleProvider.js"),_=require("./ChipInput.js"),G=require("./DropdownPopover/index.js"),J=require("./OpenedDropdown/utils/iterationOnOptions.js"),K=require("../input/Input.js");function I(){}const R=({placeHolder:c,size:j,onSelect:b,defaultOptions:l,disabled:v,noErrorHint:q,placeHolderHeight:S,showPlaceholderWhenSelected:L=!1,inputStyle:W={},inputType:O="default",onDeleteChip:E,truncatedText:M,showLeadingIconInPlaceholder:T=!1,showTrailingIconPlaceholder:w=!1,showLabelsOnMoreHover:k=!1,value:o,showSelected:h=!1,...e})=>{const[f,A]=r.useState(!1),[m,y]=r.useState(!1),n=j??"default",p=r.useRef(),[a,d]=r.useState(l??[]);function F(t){Array.isArray(t)?d([...t]):d([t]),b?.(t)}r.useEffect(()=>{const t=[];e?.options?.forEach(u=>{u.options?u.options.forEach(g=>{g.selected&&t.push({...g,label:g.label})}):u.selected&&t.push(u)}),d([...t])},[e.options]),r.useEffect(()=>{l&&d([...l])},[l]);const V=J.getSelectedOptionsAsText(a),z=L?c:V??c??"Select an option",x=e.buttonWidth,C=x??e.width??"100%",B=e.dropdownWidth??C;return i.jsx(i.Fragment,{children:i.jsx(U.InputStyleContext.Provider,{value:{InputWrapper:{height:S||(n==="x-small"?24:n==="small"?32:48),width:C,...x?{maxWidth:x}:{},zIndex:1,cursor:"pointer",padding:n==="x-small"?"4px 8px":"6px 8px",backgroundColor:e.version==="3.0"?f||m?s.COLORS.surface.hovered:s.COLORS.surface.standard:h&&o!==void 0?s.BASE_COLORS.positive[100]:m?s.COLORS.background.inactive:s.COLORS.surface.standard,transition:"background-color 0.3s ease",...W},input:{minHeight:"100%",maxWidth:"100%",color:h&&o!==void 0?s.COLORS.content.positive:"inherit"}},children:i.jsx("div",{onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:e.width?{width:e.width}:void 0,children:i.jsxs(G.DropdownPopover,{"data-test":e["data-test"],ref:p,onSelect:F,disabled:v,onDropdownVisbilityChange:t=>A(t),...e,width:B,children:[O=="default"&&i.jsx(K.Input,{version:e.version,noErrorHint:q,state:v?"disabled":"none",value:o===void 0?z:o,errorMessage:e.error,variant:n,placeholder:c??"Select an option",onChangeText:I,leftIcon:T&&a[0]?.leadingIcon?{icon:()=>i.jsx(i.Fragment,{children:a[0]?.leadingIcon})}:void 0,rightIcon:{icon:()=>i.jsxs("div",{style:{display:"flex"},children:[w&&a[0]?.trailingIcon,i.jsx(N.default,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},onClick:I,width:n==="x-small"?16:n==="small"?20:24,height:n==="x-small"?16:n==="small"?20:24,color:h?s.COLORS.content.positive:s.COLORS.content.primary})]})},truncateText:M??!0}),O=="chip"&&i.jsx(_.default,{placeholder:c??"Select options",chips:a,onDeleteChip:t=>{E?.(t)},errorMessage:e.error,isDropdownOpened:f,sizeToUse:n,containerStyle:{width:e.width??"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]})})})})};R.displayName="Dropdown";exports.Dropdown=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("react"),u=require("../../constants/Theme.js"),U=require("../../assets/icons/chevronDown.svg.js"),B=require("../input/context/InputStyleProvider.js"),G=require("./ChipInput.js"),J=require("./DropdownPopover/index.js"),K=require("./OpenedDropdown/utils/iterationOnOptions.js"),Q=require("../input/Input.js");function I(){}const j=({placeHolder:a,size:C,onSelect:b,defaultOptions:l,disabled:g,noErrorHint:q,placeHolderHeight:v,showPlaceholderWhenSelected:E=!1,inputStyle:R={},inputType:m="default",onDeleteChip:W,truncatedText:p,showLeadingIconInPlaceholder:w=!1,showTrailingIconPlaceholder:M=!1,showLabelsOnMoreHover:T=!1,value:o,showSelected:h=!1,...e})=>{const[S,L]=s.useState(!1),[k,y]=s.useState(!1),n=C??"default",A=s.useRef(),[r,c]=s.useState(l??[]);function F(t){Array.isArray(t)?c([...t]):c([t]),b?.(t)}s.useEffect(()=>{const t=[];e?.options?.forEach(d=>{d.options?d.options.forEach(x=>{x.selected&&t.push({...x,label:x.label})}):d.selected&&t.push(d)}),c([...t])},[e.options]),s.useEffect(()=>{l&&c([...l])},[l]);const V=K.getSelectedOptionsAsText(r),z=E?a:V??a??"Select an option",f=e.buttonWidth,O=f??e.width??"100%",N=e.dropdownWidth??O;return i.jsx(i.Fragment,{children:i.jsx(B.InputStyleContext.Provider,{value:{InputWrapper:{height:v||(n==="x-small"?24:n==="small"?32:48),width:O,...f?{maxWidth:f}:{},zIndex:1,cursor:"pointer",padding:n==="x-small"?"4px 8px":"6px 8px",backgroundColor:h&&o!==void 0?u.COLORS.background.positive.light:k?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease",...R},input:{minHeight:"100%",maxWidth:"100%",color:h&&o!==void 0?u.COLORS.content.positive:"inherit"}},children:i.jsx("div",{onMouseEnter:()=>y(!0),onMouseLeave:()=>y(!1),style:e.width?{width:e.width}:void 0,children:i.jsxs(J.DropdownPopover,{"data-test":e["data-test"],ref:A,onSelect:F,disabled:g,onDropdownVisbilityChange:t=>L(t),...e,width:N,children:[m=="default"&&i.jsx(Q.Input,{version:e.version,noErrorHint:q,state:g?"disabled":"none",value:o===void 0?z:o,errorMessage:e.error,variant:n,placeholder:a??"Select an option",onChangeText:I,leftIcon:w&&r[0]?.leadingIcon?{icon:()=>i.jsx(i.Fragment,{children:r[0]?.leadingIcon})}:void 0,rightIcon:{icon:()=>i.jsxs("div",{style:{display:"flex"},children:[M&&r[0]?.trailingIcon,i.jsx(U.default,{style:{transform:S?"rotate(180deg)":"rotate(0deg)"},onClick:I,width:n==="x-small"?16:n==="small"?20:24,height:n==="x-small"?16:n==="small"?20:24,color:h?u.COLORS.content.positive:u.COLORS.content.primary})]})},truncateText:p??!0}),m=="chip"&&i.jsx(G.default,{placeholder:a??"Select options",chips:r,onDeleteChip:t=>{W?.(t)},errorMessage:e.error,isDropdownOpened:S,sizeToUse:n,containerStyle:{width:e.width??"100%",cursor:"pointer"},showLabelsOnMoreHover:T})]})})})})};j.displayName="Dropdown";exports.Dropdown=j;
 //# sourceMappingURL=Dropdown.js.map

package/dist/cjs/components/dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\topenDropdownProps.version === '3.0'\n\t\t\t\t\t\t\t\t? isDropdownOpened || isHovering\n\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t: COLORS.surface.standard\n\t\t\t\t\t\t\t\t: showSelected && value !== undefined\n\t\t\t\t\t\t\t\t? BASE_COLORS.positive['100']\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? COLORS.background.inactive\n\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => setDropdownOpenFlag(isOpen)}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\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{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","BASE_COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"kbAoCA,SAASA,GAAO,CAEhB,CAEO,MAAMC,EAAoC,CAAC,CACjD,YAAAC,EACA,KAAAC,EACA,SAAAC,EACA,eAAAC,EACA,SAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,4BAAAC,EAA8B,GAC9B,WAAAC,EAAa,CAAA,EACb,UAAAC,EAAY,UACZ,aAAAC,EACA,cAAAC,EACA,6BAAAC,EAA+B,GAC/B,4BAAAC,EAA8B,GAC9B,sBAAAC,EAAwB,GACxB,MAAAC,EACA,aAAAC,EAAe,GACf,GAAGC,CACJ,IAAM,CACL,KAAM,CAACC,EAAkBC,CAAmB,EAAIC,EAAAA,SAAS,EAAK,EACxD,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAAS,EAAK,EAC5CG,EAAYtB,GAAQ,UACpBuB,EAAwBC,EAAAA,OAAA,EAGxB,CAACC,EAAgBC,CAAiB,EAAIP,EAAAA,SAC3CjB,GAAkB,CAAA,CAAC,EAEpB,SAASyB,EAAgBC,EAA2C,CAC/D,MAAM,QAAQA,CAAM,EACvBF,EAAkB,CAAC,GAAGE,CAAM,CAAC,EAE7BF,EAAkB,CAAKE,CAAO,CAAC,EAEhC3B,IAAW2B,CAAM,CAClB,CAEAC,EAAAA,UAAU,IAAM,CACf,MAAMC,EAAqC,CAAA,EAC3Cd,GAAmB,SAAS,QAASY,GAAW,CAC1CA,EAAyB,QAC5BA,EAAyB,QAAQ,QAASG,GAAO,CAC7CA,EAAG,UACND,EAAmB,KAAK,CACvB,GAAGC,EACH,MAAOA,EAAG,KAAA,CACV,CAEH,CAAC,EAEIH,EAAwB,UAC5BE,EAAmB,KAAKF,CAAsB,CAGjD,CAAC,EAEDF,EAAkB,CAAC,GAAGI,CAAkB,CAAC,CAC1C,EAAG,CAACd,EAAkB,OAAO,CAAC,EAE9Ba,EAAAA,UAAU,IAAM,CACX3B,GACHwB,EAAkB,CAAC,GAAGxB,CAAc,CAAC,CAEvC,EAAG,CAACA,CAAc,CAAC,EAEnB,MAAM8B,EAAUC,EAAAA,yBAAyBR,CAAc,EACjDS,EAAc5B,EACjBP,EACAiC,GAAWjC,GAAe,mBAEvBoC,EAAqBnB,EAAkB,YAGvCoB,EAAaD,GAAsBnB,EAAkB,OAAS,OAG9DqB,EAAgBrB,EAAkB,eAAiBoB,EAEzD,OACCE,MAAAC,EAAAA,SAAA,CACC,SAAAD,EAAAA,IAACE,EAAAA,kBAAkB,SAAlB,CACA,MAAO,CACN,aAAc,CACb,OAAQnC,IAELiB,IAAc,UACd,GACAA,IAAc,QACd,GACA,IACH,MAAOc,EACP,GAAID,EAAqB,CAAE,SAAUA,CAAA,EAAuB,CAAA,EAC5D,OAAQ,EACR,OAAQ,UACR,QAASb,IAAc,UAAY,UAAY,UAC/C,gBACCN,EAAkB,UAAY,MAC3BC,GAAoBG,EACnBqB,EAAAA,OAAO,QAAQ,QACfA,EAAAA,OAAO,QAAQ,SAChB1B,GAAgBD,IAAU,OAC1B4B,cAAY,SAAS,GAAK,EAC1BtB,EACAqB,EAAAA,OAAO,WAAW,SAClBA,EAAAA,OAAO,QAAQ,SACnB,WAAY,6BACZ,GAAGlC,CAAA,EAEJ,MAAO,CACN,UAAW,OACX,SAAU,OACV,MACCQ,GAAgBD,IAAU,OACvB2B,EAAAA,OAAO,QAAQ,SACf,SAAA,CACL,EAGD,SAAAH,EAAAA,IAAC,MAAA,CACA,aAAc,IAAMjB,EAAc,EAAI,EACtC,aAAc,IAAMA,EAAc,EAAK,EACvC,MACCL,EAAkB,MACf,CAAE,MAAOA,EAAkB,OAC3B,OAGJ,SAAA2B,EAAAA,KAACC,EAAAA,gBAAA,CACA,YAAW5B,EAAkB,WAAW,EACxC,IACCO,EAID,SAAUI,EACV,SAAAxB,EACA,0BAA4B0C,GAAW3B,EAAoB2B,CAAM,EAChE,GAAG7B,EACJ,MAAOqB,EAEN,SAAA,CAAA7B,GAAa,WACb8B,EAAAA,IAACQ,EAAAA,MAAA,CACA,QAAS9B,EAAkB,QAC3B,YAAAZ,EACA,MAAOD,EAAW,WAAa,OAC/B,MAAOW,IAAU,OAAYoB,EAAcpB,EAC3C,aAAcE,EAAkB,MAChC,QAASM,EACT,YAAavB,GAAe,mBAC5B,aAAcF,EACd,SACCc,GAAgCc,EAAe,CAAC,GAAG,YAChD,CACA,KAAM,IAAMa,EAAAA,IAAAC,WAAA,CAAG,SAAAd,EAAe,CAAC,GAAG,WAAA,CAAY,CAAA,EAE9C,OAEJ,UAAW,CACV,KAAM,IACLkB,EAAAA,KAAC,MAAA,CACA,MAAO,CACN,QAAS,MAAA,EAGT,SAAA,CAAA/B,GACCa,EAAe,CAAC,GAAoB,aACtCa,EAAAA,IAACS,EAAAA,QAAA,CACA,MAAO,CACN,UAAW9B,EACR,iBACA,cAAA,EAEJ,QAASpB,EACT,MACCyB,IAAc,UACX,GACAA,IAAc,QACd,GACA,GAEJ,OACCA,IAAc,UACX,GACAA,IAAc,QACd,GACA,GAEJ,MACCP,EACG0B,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,OAAA,CAAA,CAEpB,CAAA,CAAA,CACD,EAGF,aAAc/B,GAAiB,EAAA,CAAA,EAGhCF,GAAa,QACb8B,EAAAA,IAACU,EAAAA,QAAA,CACA,YAAajD,GAAe,iBAC5B,MAAO0B,EACP,aAAewB,GAAS,CACvBxC,IAAewC,CAAI,CACpB,EACA,aAAcjC,EAAkB,MAChC,iBAAAC,EACA,UAAAK,EACA,eAAgB,CACf,MAAON,EAAkB,OAAS,OAClC,OAAQ,SAAA,EAET,sBAAAH,CAAA,CAAA,CACD,CAAA,CAAA,CAEF,CAAA,CACD,CAAA,EAEF,CAEF,EAEAf,EAAS,YAAc"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Ref, useEffect, useRef, useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport { Input } from '../input';\nimport { InputStyleContext } from '../input/context/InputStyleProvider';\nimport ChipInput from './ChipInput';\nimport { DropdownPopover } from './DropdownPopover';\nimport { getSelectedOptionsAsText } from './OpenedDropdown/utils/iterationOnOptions';\nimport {\n\tDropdownOption,\n\tGroupedOption,\n\tOpenDropdownProps,\n\tSingleOption,\n} from './type';\n\nexport type DropdownProps = OpenDropdownProps & {\n\tplaceHolder?: string;\n\tsize?: 'default' | 'small' | 'x-small';\n\tdisabled?: boolean;\n\tnoErrorHint?: boolean;\n\tbuttonWidth?: string;\n\tplaceHolderHeight?: string;\n\tshowPlaceholderWhenSelected?: boolean;\n\tinputStyle?: React.CSSProperties;\n\tinputType?: 'chip' | 'default';\n\tonDeleteChip?: (chip: SingleOption) => void;\n\ttruncatedText?: boolean;\n\t'data-test'?: string;\n\tshowLeadingIconInPlaceholder?: boolean;\n\tshowTrailingIconPlaceholder?: boolean;\n\tshowLabelsOnMoreHover?: boolean;\n\tbackgroundColor?: string;\n\tvalue?: string;\n\tshowSelected?: boolean;\n};\n\nfunction noop() {\n\t/** empty */\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n\tplaceHolder,\n\tsize,\n\tonSelect,\n\tdefaultOptions,\n\tdisabled,\n\tnoErrorHint,\n\tplaceHolderHeight,\n\tshowPlaceholderWhenSelected = false,\n\tinputStyle = {},\n\tinputType = 'default',\n\tonDeleteChip,\n\ttruncatedText,\n\tshowLeadingIconInPlaceholder = false,\n\tshowTrailingIconPlaceholder = false,\n\tshowLabelsOnMoreHover = false,\n\tvalue,\n\tshowSelected = false,\n\t...openDropdownProps\n}) => {\n\tconst [isDropdownOpened, setDropdownOpenFlag] = useState(false);\n\tconst [isHovering, setIsHovering] = useState(false);\n\tconst sizeToUse = size ?? 'default';\n\tconst dropdownVisibilityRef = useRef<{\n\t\topenDropdown: boolean;\n\t}>();\n\tconst [selectedOption, setSelectedOption] = useState<DropdownOption[]>(\n\t\tdefaultOptions ?? [],\n\t);\n\tfunction handleSelection(option: DropdownOption | DropdownOption[]) {\n\t\tif (Array.isArray(option)) {\n\t\t\tsetSelectedOption([...option]);\n\t\t} else {\n\t\t\tsetSelectedOption([...[option]]);\n\t\t}\n\t\tonSelect?.(option);\n\t}\n\n\tuseEffect(() => {\n\t\tconst flatSelectedOption: SingleOption[] = [];\n\t\topenDropdownProps?.options?.forEach((option) => {\n\t\t\tif ((option as GroupedOption).options) {\n\t\t\t\t(option as GroupedOption).options.forEach((op) => {\n\t\t\t\t\tif (op.selected) {\n\t\t\t\t\t\tflatSelectedOption.push({\n\t\t\t\t\t\t\t...op,\n\t\t\t\t\t\t\tlabel: op.label,\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tif ((option as SingleOption).selected) {\n\t\t\t\t\tflatSelectedOption.push(option as SingleOption);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\n\t\tsetSelectedOption([...flatSelectedOption]);\n\t}, [openDropdownProps.options]);\n\n\tuseEffect(() => {\n\t\tif (defaultOptions) {\n\t\t\tsetSelectedOption([...defaultOptions]);\n\t\t}\n\t}, [defaultOptions]);\n\n\tconst textVal = getSelectedOptionsAsText(selectedOption);\n\tconst displayText = showPlaceholderWhenSelected\n\t\t? placeHolder\n\t\t: textVal ?? placeHolder ?? 'Select an option';\n\n\tconst configuredMaxWidth = openDropdownProps.buttonWidth;\n\n\t// Shared width for the input wrapper and dropdown popover\n\tconst inputWidth = configuredMaxWidth ?? openDropdownProps.width ?? '100%';\n\n\t// Width passed to dropdown popover — matches input box width\n\tconst dropdownWidth = openDropdownProps.dropdownWidth ?? inputWidth;\n\n\treturn (\n\t\t<>\n\t\t\t<InputStyleContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tInputWrapper: {\n\t\t\t\t\t\theight: placeHolderHeight\n\t\t\t\t\t\t\t? placeHolderHeight\n\t\t\t\t\t\t\t: sizeToUse === 'x-small'\n\t\t\t\t\t\t\t? 24\n\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t? 32\n\t\t\t\t\t\t\t: 48,\n\t\t\t\t\t\twidth: inputWidth,\n\t\t\t\t\t\t...(configuredMaxWidth ? { maxWidth: configuredMaxWidth } : {}),\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\tpadding: sizeToUse === 'x-small' ? '4px 8px' : '6px 8px',\n\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t\t\t\t\t: isHovering\n\t\t\t\t\t\t\t\t? '#E0E0E0'\n\t\t\t\t\t\t\t\t: '#ffffff',\n\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t...inputStyle,\n\t\t\t\t\t},\n\t\t\t\t\tinput: {\n\t\t\t\t\t\tminHeight: '100%',\n\t\t\t\t\t\tmaxWidth: '100%',\n\t\t\t\t\t\tcolor:\n\t\t\t\t\t\t\tshowSelected && value !== undefined\n\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t: 'inherit',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tonMouseEnter={() => setIsHovering(true)}\n\t\t\t\t\tonMouseLeave={() => setIsHovering(false)}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\topenDropdownProps.width\n\t\t\t\t\t\t\t? { width: openDropdownProps.width }\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t>\n\t\t\t\t\t<DropdownPopover\n\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\tref={\n\t\t\t\t\t\t\tdropdownVisibilityRef as Ref<{\n\t\t\t\t\t\t\t\topenDropdown: boolean;\n\t\t\t\t\t\t\t}>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={handleSelection}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => setDropdownOpenFlag(isOpen)}\n\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\twidth={dropdownWidth}\n\t\t\t\t\t>\n\t\t\t\t\t\t{inputType == 'default' && (\n\t\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\t\tversion={openDropdownProps.version}\n\t\t\t\t\t\t\t\tnoErrorHint={noErrorHint}\n\t\t\t\t\t\t\t\tstate={disabled ? 'disabled' : 'none'}\n\t\t\t\t\t\t\t\tvalue={value === undefined ? displayText : value}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tvariant={sizeToUse}\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select an option'}\n\t\t\t\t\t\t\t\tonChangeText={noop}\n\t\t\t\t\t\t\t\tleftIcon={\n\t\t\t\t\t\t\t\t\tshowLeadingIconInPlaceholder && selectedOption[0]?.leadingIcon\n\t\t\t\t\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t\t\t\t\ticon: () => <>{selectedOption[0]?.leadingIcon}</>,\n\t\t\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\trightIcon={{\n\t\t\t\t\t\t\t\t\ticon: () => (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\tdisplay: 'flex',\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{showTrailingIconPlaceholder &&\n\t\t\t\t\t\t\t\t\t\t\t\t(selectedOption[0] as SingleOption)?.trailingIcon}\n\t\t\t\t\t\t\t\t\t\t\t<DownIcon\n\t\t\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\t\t\ttransform: isDropdownOpened\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 'rotate(180deg)'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 'rotate(0deg)',\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={noop}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\theight={\n\t\t\t\t\t\t\t\t\t\t\t\t\tsizeToUse === 'x-small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 16\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: sizeToUse === 'small'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? 20\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: 24\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\t\t\t\tshowSelected\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.positive\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.primary\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\ttruncateText={truncatedText ?? true}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{inputType == 'chip' && (\n\t\t\t\t\t\t\t<ChipInput\n\t\t\t\t\t\t\t\tplaceholder={placeHolder ?? 'Select options'}\n\t\t\t\t\t\t\t\tchips={selectedOption as SingleOption[]}\n\t\t\t\t\t\t\t\tonDeleteChip={(chip) => {\n\t\t\t\t\t\t\t\t\tonDeleteChip?.(chip);\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\terrorMessage={openDropdownProps.error}\n\t\t\t\t\t\t\t\tisDropdownOpened={isDropdownOpened}\n\t\t\t\t\t\t\t\tsizeToUse={sizeToUse}\n\t\t\t\t\t\t\t\tcontainerStyle={{\n\t\t\t\t\t\t\t\t\twidth: openDropdownProps.width ?? '100%',\n\t\t\t\t\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tshowLabelsOnMoreHover={showLabelsOnMoreHover}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</DropdownPopover>\n\t\t\t\t</div>\n\t\t\t</InputStyleContext.Provider>\n\t\t</>\n\t);\n};\n\nDropdown.displayName = 'Dropdown';\n"],"names":["noop","Dropdown","placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected","openDropdownProps","isDropdownOpened","setDropdownOpenFlag","useState","isHovering","setIsHovering","sizeToUse","dropdownVisibilityRef","useRef","selectedOption","setSelectedOption","handleSelection","option","useEffect","flatSelectedOption","op","textVal","getSelectedOptionsAsText","displayText","configuredMaxWidth","inputWidth","dropdownWidth","jsx","Fragment","InputStyleContext","COLORS","jsxs","DropdownPopover","isOpen","Input","DownIcon","ChipInput","chip"],"mappings":"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"}

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),I=require("react-popper"),m=require("../../../constants/Theme.js"),S=require("../Common.styled.js"),L=require("../../tooltips/Tooltip.js"),T=require("../../dropShadow/DropShadow.js"),_=require("../OpenedDropdown/components/OpennedDropdown.js"),k=a=>a&&typeof a=="object"&&"default"in a?a:{default:a},w=k(s),v=w.default.forwardRef(({children:a,onDropdownVisbilityChange:g,version:r="1.0",tooltipContent:u,tooltipDirection:x,showTooltipArrow:h,isChildLoading:y,forceOpen:d,...e},R)=>{const c=R,[l,i]=s.useState(!1),[j,o]=s.useState(!1),[E,O]=s.useState(null),[C,q]=s.useState(null),f=s.useRef(null),{styles:M,attributes:z}=I.usePopper(E,C,{placement:e.placement,strategy:e.strategy}),H=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};s.useImperativeHandle(c,()=>({openDropdown:l}),[]),s.useEffect(()=>{c?.current&&(c.current.openDropdown=l)},[l]),s.useEffect(()=>{g?.(l)},[l]);const b=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative",...r==="3.0"&&{backgroundColor:l||j?m.COLORS.surface.hovered:m.COLORS.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}},ref:O,onMouseEnter:r==="3.0"?()=>o(!0):void 0,onMouseLeave:r==="3.0"?()=>o(!1):void 0,children:[t.jsx(S.OverLapAbs,{ref:f,allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),l?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:y,children:e.allowEvents?a:null}),e.allowEvents?null:a]}),(l||d)&&t.jsx(S.OpenDropdownContainer,{ref:q,style:{...M.popper,zIndex:e.dropdownZIndex??3},...z.popper,"data-test":e["data-test"],children:t.jsx(T.DropShadow,{level:"z2",position:"down",style:{borderRadius:r==="3.0"?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"},children:t.jsx(_.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:H,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!l&&!d&&u!==void 0?t.jsx(L.Tooltip,{body:u,placement:x,hideArrow:!h,children:t.jsx("div",{"data-test":e["data-test"],children:b()})}):b()})});v.displayName="DropdownPopover";exports.DropdownPopover=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),a=require("react"),z=require("react-popper"),m=require("../Common.styled.js"),_=require("../../tooltips/Tooltip.js"),I=require("../../dropShadow/DropShadow.js"),M=require("../OpenedDropdown/components/OpennedDropdown.js"),T=l=>l&&typeof l=="object"&&"default"in l?l:{default:l},w=T(a),v=w.default.forwardRef(({children:l,onDropdownVisbilityChange:S,version:r="1.0",tooltipContent:u,tooltipDirection:b,showTooltipArrow:y,isChildLoading:j,forceOpen:d,...e},x)=>{const c=x,[s,i]=a.useState(!1),[h,g]=a.useState(null),[E,R]=a.useState(null),f=a.useRef(null),{styles:q,attributes:C}=z.usePopper(h,E,{placement:e.placement,strategy:e.strategy}),O=n=>{r==="2.0"&&e.isMultiSelect&&n&&e.onSelect?.([...n]),i(!1),e?.onClose?.()};a.useImperativeHandle(c,()=>({openDropdown:s}),[]),a.useEffect(()=>{c?.current&&(c.current.openDropdown=s)},[s]),a.useEffect(()=>{S?.(s)},[s]);const o=()=>t.jsxs(t.Fragment,{children:[t.jsxs("div",{style:{position:"relative"},ref:g,children:[t.jsx(m.OverLapAbs,{ref:f,allowEvents:e.allowEvents,disabled:e.disabled,onClick:n=>{e.onDropdownOpen?.(),s?(i(!1),n.preventDefault()):e.disabled||i(!0)},isChildLoading:j,children:e.allowEvents?l:null}),e.allowEvents?null:l]}),(s||d)&&t.jsx(m.OpenDropdownContainer,{ref:R,style:{...q.popper,zIndex:e.dropdownZIndex??3},...C.popper,"data-test":e["data-test"],children:t.jsx(I.DropShadow,{level:"z2",position:"down",style:{borderRadius:8},children:t.jsx(M.OpenedDropdown,{...e,onSelect:n=>{r==="2.0"&&e.isMultiSelect||(e.onSelect?.(n),i(!1))},onClose:O,version:r,headerRef:f,zeroState:e?.zeroState,isDraggable:e.isDraggable,onOptionsReorder:e.onOptionsReorder})})})]});return t.jsx(t.Fragment,{children:!s&&!d&&u!==void 0?t.jsx(_.Tooltip,{body:u,placement:b,hideArrow:!y,children:t.jsx("div",{"data-test":e["data-test"],children:o()})}):o()})});v.displayName="DropdownPopover";exports.DropdownPopover=v;
 //# sourceMappingURL=index.js.map

package/dist/cjs/components/dropdown/DropdownPopover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { COLORS } from '@src/constants/Theme';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/**\n\t * If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t */\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [isHovering, setIsHovering] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t...(version === '3.0' && {\n\t\t\t\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\t\t\t\topenDropdown || isHovering\n\t\t\t\t\t\t\t\t\t\t? COLORS.surface.hovered\n\t\t\t\t\t\t\t\t\t\t: COLORS.surface.standard,\n\t\t\t\t\t\t\t\ttransition: 'background-color 0.3s ease',\n\t\t\t\t\t\t\t\tborderRadius: 4,\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\t}}\n\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t\tonMouseEnter={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(true) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseLeave={\n\t\t\t\t\t\t\tversion === '3.0' ? () => setIsHovering(false) : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown || forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tborderRadius: version === '3.0' ? 4 : 8,\n\t\t\t\t\t\t\t\t\tboxShadow: '0 2px 8px 0 rgba(0, 0, 0, 0.12)',\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<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","isHovering","setIsHovering","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","COLORS","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/dropdown/DropdownPopover/index.tsx"],"sourcesContent":["import React, {\n\tLegacyRef,\n\tRef,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n\tuseState,\n} from 'react';\nimport { usePopper } from 'react-popper';\nimport { DropShadow } from '@src/components/dropShadow';\nimport { Placement, Tooltip } from '@src/components/tooltips';\nimport { OpenDropdownContainer, OverLapAbs } from '../Common.styled';\nimport { OpenedDropdown } from '../OpenedDropdown';\nimport { OpenDropdownProps } from '../type';\n\ntype DropdownProps = OpenDropdownProps & {\n\tisLoading?: boolean;\n\tchildren?: React.ReactNode;\n\tdisabled?: boolean;\n\tonDropdownOpen?: () => void;\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\n\ttooltipContent?: string;\n\ttooltipDirection?: Placement;\n\tshowTooltipArrow?: boolean;\n\tallowEvents?: boolean;\n\t'data-test'?: string;\n\tisChildLoading?: boolean;\n\t/**\n\t * If true, forces the dropdown to remain open regardless of user interaction or internal state.\n\t * This prop overrides the internal openDropdown state, ensuring the dropdown stays open.\n\t * Use this prop when you need to programmatically control the dropdown's visibility from a parent component.\n\t */\n\tforceOpen?: boolean;\n};\n\nexport const DropdownPopover = React.forwardRef<\n\t{\n\t\topenDropdown: boolean;\n\t},\n\tDropdownProps\n>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tonDropdownVisbilityChange,\n\t\t\tversion = '1.0',\n\t\t\ttooltipContent,\n\t\t\ttooltipDirection,\n\t\t\tshowTooltipArrow,\n\t\t\tisChildLoading,\n\t\t\tforceOpen,\n\t\t\t...openDropdownProps\n\t\t},\n\t\tunTypedRef,\n\t) => {\n\t\tconst ref = unTypedRef as React.RefObject<{ openDropdown: boolean }>;\n\t\tconst [openDropdown, setDropdownVisibility] = useState(false);\n\t\tconst [referenceElement, setReferenceElement] = useState(null);\n\t\tconst [popperElement, setPopperElement] = useState(null);\n\t\tconst headerRef = useRef(null);\n\n\t\tconst { styles, attributes } = usePopper(referenceElement, popperElement, {\n\t\t\tplacement: openDropdownProps.placement,\n\t\t\tstrategy: openDropdownProps.strategy,\n\t\t});\n\n\t\tconst onCloseHandle = (data) => {\n\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect && data) {\n\t\t\t\topenDropdownProps.onSelect?.([...data]);\n\t\t\t}\n\t\t\tsetDropdownVisibility(false);\n\t\t\topenDropdownProps?.onClose?.();\n\t\t};\n\n\t\tuseImperativeHandle(\n\t\t\tref,\n\t\t\t() => {\n\t\t\t\treturn {\n\t\t\t\t\topenDropdown: openDropdown,\n\t\t\t\t};\n\t\t\t},\n\t\t\t[],\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tif (ref?.current) ref.current.openDropdown = openDropdown;\n\t\t}, [openDropdown]);\n\n\t\tuseEffect(() => {\n\t\t\tonDropdownVisbilityChange?.(openDropdown);\n\t\t}, [openDropdown]);\n\n\t\tconst dropDownComponent = () => {\n\t\t\treturn (\n\t\t\t\t<>\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{ position: 'relative' }}\n\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\tref={setReferenceElement as LegacyRef<HTMLDivElement>}\n\t\t\t\t\t>\n\t\t\t\t\t\t<OverLapAbs\n\t\t\t\t\t\t\tref={headerRef}\n\t\t\t\t\t\t\tallowEvents={openDropdownProps.allowEvents}\n\t\t\t\t\t\t\tdisabled={openDropdownProps.disabled}\n\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\topenDropdownProps.onDropdownOpen?.();\n\t\t\t\t\t\t\t\tif (!openDropdown) {\n\t\t\t\t\t\t\t\t\tif (!openDropdownProps.disabled) setDropdownVisibility(true);\n\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\n\t\t\t\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tisChildLoading={isChildLoading}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{openDropdownProps.allowEvents ? children : null}\n\t\t\t\t\t\t</OverLapAbs>\n\t\t\t\t\t\t{openDropdownProps.allowEvents ? null : children}\n\t\t\t\t\t</div>\n\t\t\t\t\t{(openDropdown || forceOpen) && (\n\t\t\t\t\t\t<OpenDropdownContainer\n\t\t\t\t\t\t\t/** This assigment is mentioned as per react-popper's docs, so typecasting  */\n\t\t\t\t\t\t\tref={setPopperElement as Ref<HTMLDivElement>}\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t...styles['popper'],\n\t\t\t\t\t\t\t\tzIndex: openDropdownProps.dropdownZIndex ?? 3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t{...attributes['popper']}\n\t\t\t\t\t\t\tdata-test={openDropdownProps['data-test']}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<DropShadow\n\t\t\t\t\t\t\t\tlevel={'z2'}\n\t\t\t\t\t\t\t\tposition={'down'}\n\t\t\t\t\t\t\t\tstyle={{ borderRadius: 8 }}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<OpenedDropdown\n\t\t\t\t\t\t\t\t\t{...openDropdownProps}\n\t\t\t\t\t\t\t\t\tonSelect={(options) => {\n\t\t\t\t\t\t\t\t\t\tif (version === '2.0' && openDropdownProps.isMultiSelect) {\n\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\t\t\t\topenDropdownProps.onSelect?.(options);\n\t\t\t\t\t\t\t\t\t\t\tsetDropdownVisibility(false);\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\tonClose={onCloseHandle}\n\t\t\t\t\t\t\t\t\tversion={version}\n\t\t\t\t\t\t\t\t\theaderRef={headerRef}\n\t\t\t\t\t\t\t\t\tzeroState={openDropdownProps?.zeroState}\n\t\t\t\t\t\t\t\t\tisDraggable={openDropdownProps.isDraggable}\n\t\t\t\t\t\t\t\t\tonOptionsReorder={openDropdownProps.onOptionsReorder}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</DropShadow>\n\t\t\t\t\t\t</OpenDropdownContainer>\n\t\t\t\t\t)}\n\t\t\t\t</>\n\t\t\t);\n\t\t};\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{!openDropdown && !forceOpen && tooltipContent !== undefined ? (\n\t\t\t\t\t<Tooltip\n\t\t\t\t\t\tbody={tooltipContent}\n\t\t\t\t\t\tplacement={tooltipDirection}\n\t\t\t\t\t\thideArrow={!showTooltipArrow}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div data-test={openDropdownProps['data-test']}>\n\t\t\t\t\t\t\t{dropDownComponent()}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Tooltip>\n\t\t\t\t) : (\n\t\t\t\t\tdropDownComponent()\n\t\t\t\t)}\n\t\t\t</>\n\t\t);\n\t},\n);\n\nDropdownPopover.displayName = 'DropdownPopover';\n"],"names":["DropdownPopover","React","children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen","openDropdownProps","unTypedRef","ref","openDropdown","setDropdownVisibility","useState","referenceElement","setReferenceElement","popperElement","setPopperElement","headerRef","useRef","styles","attributes","usePopper","onCloseHandle","data","useImperativeHandle","useEffect","dropDownComponent","jsxs","Fragment","jsx","OverLapAbs","e","OpenDropdownContainer","DropShadow","OpenedDropdown","options","Tooltip"],"mappings":"kZAmCaA,EAAkBC,EAAAA,QAAM,WAMpC,CACC,CACC,SAAAC,EACA,0BAAAC,EACA,QAAAC,EAAU,MACV,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,UAAAC,EACA,GAAGC,CAAA,EAEJC,IACI,CACJ,MAAMC,EAAMD,EACN,CAACE,EAAcC,CAAqB,EAAIC,EAAAA,SAAS,EAAK,EACtD,CAACC,EAAkBC,CAAmB,EAAIF,EAAAA,SAAS,IAAI,EACvD,CAACG,EAAeC,CAAgB,EAAIJ,EAAAA,SAAS,IAAI,EACjDK,EAAYC,EAAAA,OAAO,IAAI,EAEvB,CAAE,OAAAC,EAAQ,WAAAC,CAAA,EAAeC,EAAAA,UAAUR,EAAkBE,EAAe,CACzE,UAAWR,EAAkB,UAC7B,SAAUA,EAAkB,QAAA,CAC5B,EAEKe,EAAiBC,GAAS,CAC3BtB,IAAY,OAASM,EAAkB,eAAiBgB,GAC3DhB,EAAkB,WAAW,CAAC,GAAGgB,CAAI,CAAC,EAEvCZ,EAAsB,EAAK,EAC3BJ,GAAmB,UAAA,CACpB,EAEAiB,EAAAA,oBACCf,EACA,KACQ,CACN,aAAAC,CAAA,GAGF,CAAA,CAAC,EAGFe,EAAAA,UAAU,IAAM,CACXhB,GAAK,UAASA,EAAI,QAAQ,aAAeC,EAC9C,EAAG,CAACA,CAAY,CAAC,EAEjBe,EAAAA,UAAU,IAAM,CACfzB,IAA4BU,CAAY,CACzC,EAAG,CAACA,CAAY,CAAC,EAEjB,MAAMgB,EAAoB,IAExBC,EAAAA,KAAAC,WAAA,CACC,SAAA,CAAAD,EAAAA,KAAC,MAAA,CACA,MAAO,CAAE,SAAU,UAAA,EAEnB,IAAKb,EAEL,SAAA,CAAAe,EAAAA,IAACC,EAAAA,WAAA,CACA,IAAKb,EACL,YAAaV,EAAkB,YAC/B,SAAUA,EAAkB,SAC5B,QAAUwB,GAAM,CACfxB,EAAkB,iBAAA,EACbG,GAGJC,EAAsB,EAAK,EAC3BoB,EAAE,eAAA,GAHGxB,EAAkB,UAAUI,EAAsB,EAAI,CAK7D,EACA,eAAAN,EAEC,SAAAE,EAAkB,YAAcR,EAAW,IAAA,CAAA,EAE5CQ,EAAkB,YAAc,KAAOR,CAAA,CAAA,CAAA,GAEvCW,GAAgBJ,IACjBuB,EAAAA,IAACG,EAAAA,sBAAA,CAEA,IAAKhB,EACL,MAAO,CACN,GAAGG,EAAO,OACV,OAAQZ,EAAkB,gBAAkB,CAAA,EAE5C,GAAGa,EAAW,OACf,YAAWb,EAAkB,WAAW,EAExC,SAAAsB,EAAAA,IAACI,EAAAA,WAAA,CACA,MAAO,KACP,SAAU,OACV,MAAO,CAAE,aAAc,CAAA,EAEvB,SAAAJ,EAAAA,IAACK,EAAAA,eAAA,CACC,GAAG3B,EACJ,SAAW4B,GAAY,CAClBlC,IAAY,OAASM,EAAkB,gBAG1CA,EAAkB,WAAW4B,CAAO,EACpCxB,EAAsB,EAAK,EAE7B,EACA,QAASW,EACT,QAAArB,EACA,UAAAgB,EACA,UAAWV,GAAmB,UAC9B,YAAaA,EAAkB,YAC/B,iBAAkBA,EAAkB,gBAAA,CAAA,CACrC,CAAA,CACD,CAAA,CACD,EAEF,EAIF,yBAEG,SAAA,CAACG,GAAgB,CAACJ,GAAaJ,IAAmB,OAClD2B,EAAAA,IAACO,EAAAA,QAAA,CACA,KAAMlC,EACN,UAAWC,EACX,UAAW,CAACC,EAEZ,eAAC,MAAA,CAAI,YAAWG,EAAkB,WAAW,EAC3C,YAAkB,CACpB,CAAA,CAAA,EAGDmB,GAAkB,CAEpB,CAEF,CACD,EAEA7B,EAAgB,YAAc"}

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

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