@bikdotai/bik-component-library 0.0.836-beta.3 → 0.0.837-0

package/dist/esm/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\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\t/** Accessible name when no visible label is rendered (e.g. product-picker rows). */\n\tariaLabel?: 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 toggleCheck = (event?: React.SyntheticEvent) => {\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 as React.MouseEvent);\n\t\t}\n\t};\n\n\tconst handleCheck = (event: React.MouseEvent) => {\n\t\ttoggleCheck(event);\n\t};\n\n\tconst handleKeyDown = (event: React.KeyboardEvent) => {\n\t\tif (event.key === ' ' || event.key === 'Enter') {\n\t\t\tevent.preventDefault();\n\t\t\ttoggleCheck(event);\n\t\t}\n\t};\n\n\tconst ariaChecked = isPartiallyChecked\n\t\t? 'mixed'\n\t\t: isChecked\n\t\t? 'true'\n\t\t: 'false';\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\trole=\"checkbox\"\n\t\t\taria-checked={ariaChecked}\n\t\t\taria-disabled={isDisabled || undefined}\n\t\t\taria-label={props.label ? undefined : props.ariaLabel}\n\t\t\ttabIndex={isDisabled ? -1 : 0}\n\t\t\tonClick={handleCheck}\n\t\t\tonKeyDown={handleKeyDown}\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\tactiveColor={props.activeColor}\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","toggleCheck","event","newVal","handleCheck","handleKeyDown","ariaChecked","useEffect","renderLabel","Fragment","LabelTypography","BodyCaption","BodySecondary","BodyPrimary","TitleSmall","TitleRegular","CheckboxContainer","CheckboxIcon"],"mappings":"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"}

package/dist/esm/components/checkBox/CheckBox.styled.d.ts

@@ -9,4 +9,5 @@ export declare const CheckboxIcon: import('styled-components').StyledComponent<"
     isDisabled: boolean;
     size?: "SMALL" | "DEFAULT" | "XS" | undefined;
     borderColor?: string | undefined;
+    activeColor?: string | undefined;
 }, never>;

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

@@ -1,6 +1,7 @@
-import t, { css as i } from "styled-components";
+import r, { css as i } from "styled-components";
+import { rgba as t } from "../../utils/rgba.js";
 import { COLORS as o } from "../../constants/Theme.js";
-const s = t.div`
+const c = r.div`
 	display: inline-flex;
 	gap: 8px;
 	align-items: center;
@@ -10,16 +11,15 @@ const s = t.div`
 				background: ${o.surface.subdued};
 			}
 		`}
-`, n = t.div`
-	width: ${(e) => e.size === "DEFAULT" ? 14 : 12}px;
-	height: ${(e) => e.size === "DEFAULT" ? 14 : 12}px;
+`, n = r.div`
+	width: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}px;
+	height: ${(e) => e.size === "XS" ? 12 : e.size === "SMALL" ? 16 : 18}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"};
+	box-sizing: border-box;
 	${(e) => e.isDisabled ? i`
 					border: ${e.size === "DEFAULT" ? 2 : 1.5}px solid
 						${o.content.inactive};
@@ -29,20 +29,18 @@ const s = t.div`
 			  `}
 	${(e) => e.checked && i`
 			border: 0px;
-			width: ${e.size === "XS" ? 12 : 18}px;
-			height: ${e.size === "XS" ? 12 : 18}px;
 		`}
 	${(e) => e.hovered && i`
 			outline: 3px solid ${o.surface.hovered};
 		`}
 	${(e) => e.clicked && !e.isDisabled && i`
 			outline: 3px solid
-				${e.checked ? o.stroke.positive.lightAlt : o.surface.hovered};
+				${e.checked ? e.activeColor ? t(e.activeColor, 0.24) : o.stroke.positive.lightAlt : o.surface.hovered};
 			outline-offset: 2px;
 		`}
 `;
 export {
-  s as CheckboxContainer,
+  c as CheckboxContainer,
   n as CheckboxIcon
 };
 //# sourceMappingURL=CheckBox.styled.js.map

package/dist/esm/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":";;AAGO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UAQzB,CAACC,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA,WAC9C,CAACA,MAAWA,EAAM,SAAS,YAAY,KAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAO3C,CAACA,MAAWA,EAAM,SAAS,OAAO,eAAe,aAAc;AAAA,GAC3E,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,YAEUD,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,aAC5BA,EAAM,SAAS,OAAO,KAAK,EAAE;AAAA,GACvC;AAAA,GACA,CAACA,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLE,EAAO,OAAO,SAAS,WACvBA,EAAO,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 { rgba } from '@src/utils/rgba';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CheckboxContainer = styled.div<{\n\tisDisabled?: boolean;\n\tenableHover?: boolean;\n}>`\n\tdisplay: inline-flex;\n\tgap: 8px;\n\talign-items: center;\n\tcursor: ${(props) => (props.isDisabled ? 'default' : 'pointer')};\n\t${(props) =>\n\t\tprops.enableHover &&\n\t\tcss`\n\t\t\t:hover {\n\t\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t\t}\n\t\t`}\n`;\n\nexport const CheckboxIcon = styled.div<{\n\tchecked: boolean;\n\thovered: boolean;\n\tclicked: boolean;\n\tisDisabled: boolean;\n\tsize?: 'SMALL' | 'DEFAULT' | 'XS';\n\tborderColor?: string;\n\tactiveColor?: string;\n}>`\n\twidth: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\theight: ${(props) =>\n\t\tprops.size === 'XS' ? 12 : props.size === 'SMALL' ? 16 : 18}px;\n\tborder-radius: 4px;\n\tborder: 2px solid black;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tbox-sizing: border-box;\n\t${(props) =>\n\t\tprops.isDisabled\n\t\t\t? css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${COLORS.content.inactive};\n\t\t\t  `\n\t\t\t: css`\n\t\t\t\t\tborder: ${props.size === 'DEFAULT' ? 2 : 1.5}px solid\n\t\t\t\t\t\t${props.borderColor ?? 'black'};\n\t\t\t  `}\n\t${(props) =>\n\t\tprops.checked &&\n\t\tcss`\n\t\t\tborder: 0px;\n\t\t`}\n\t${(props) =>\n\t\tprops.hovered &&\n\t\tcss`\n\t\t\toutline: 3px solid ${COLORS.surface.hovered};\n\t\t`}\n\t${(props) =>\n\t\tprops.clicked &&\n\t\t!props.isDisabled &&\n\t\tcss`\n\t\t\toutline: 3px solid\n\t\t\t\t${props.checked\n\t\t\t\t\t? props.activeColor\n\t\t\t\t\t\t? rgba(props.activeColor, 0.24)\n\t\t\t\t\t\t: COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.surface.hovered};\n\t\t\toutline-offset: 2px;\n\t\t`}\n`;\n"],"names":["CheckboxContainer","styled","props","css","COLORS","CheckboxIcon","rgba"],"mappings":";;;AAIO,MAAMA,IAAoBC,EAAO;AAAA;AAAA;AAAA;AAAA,WAO7B,CAACC,MAAWA,EAAM,aAAa,YAAY,SAAU;AAAA,GAC7D,CAACA,MACFA,EAAM,eACNC;AAAA;AAAA,kBAEgBC,EAAO,QAAQ,OAAO;AAAA;AAAA,GAErC;AAAA,GAGUC,IAAeJ,EAAO;AAAA,UASzB,CAACC,MACTA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA,WAClD,CAACA,MACVA,EAAM,SAAS,OAAO,KAAKA,EAAM,SAAS,UAAU,KAAK,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO1D,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,YAAY,IAAI,GAAG;AAAA,QACzCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA,GAEC;AAAA,GACA,CAACD,MACFA,EAAM,WACNC;AAAA,wBACsBC,EAAO,QAAQ,OAAO;AAAA,GAC3C;AAAA,GACA,CAACF,MACFA,EAAM,WACN,CAACA,EAAM,cACPC;AAAA;AAAA,MAEID,EAAM,UACLA,EAAM,cACLI,EAAKJ,EAAM,aAAa,IAAI,IAC5BE,EAAO,OAAO,SAAS,WACxBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}

package/dist/esm/components/dropdown/ChipInput.d.ts

@@ -9,6 +9,7 @@ interface ChipInputProps {
     sizeToUse?: 'default' | 'small' | 'x-small';
     errorMessage?: string;
     showLabelsOnMoreHover?: boolean;
+    placeholderColor?: string;
 }
 declare const ChipInput: React.FC<ChipInputProps>;
 export default ChipInput;

package/dist/esm/components/dropdown/ChipInput.js

@@ -1,16 +1,16 @@
-import { jsxs as m, Fragment as S, jsx as e } from "react/jsx-runtime";
-import { useState as s, useEffect as w } from "react";
-import L from "../../utils/StringUtils.js";
+import { jsxs as m, Fragment as w, jsx as e } from "react/jsx-runtime";
+import { useState as s, useEffect as L } from "react";
+import R from "../../utils/StringUtils.js";
 import { COLORS as d } from "../../constants/Theme.js";
-import R from "../../assets/icons/chevronDown.svg.js";
-import E from "../../assets/icons/cross.svg.js";
-import j from "../../assets/icons/errorInfo.svg.js";
-import { InputFooter as A } from "../input/Input.styled.js";
+import E from "../../assets/icons/chevronDown.svg.js";
+import j from "../../assets/icons/cross.svg.js";
+import A from "../../assets/icons/errorInfo.svg.js";
+import { InputFooter as F } from "../input/Input.styled.js";
 import { BodyCaption as h } from "../TypographyStyle.js";
-import { ChipInputWrapper as F } from "./Common.styled.js";
-import { Tag as T } from "../tag/Tag.js";
-import { Tooltip as k } from "../tooltips/Tooltip.js";
-const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
+import { ChipInputWrapper as T } from "./Common.styled.js";
+import { Tag as k } from "../tag/Tag.js";
+import { Tooltip as B } from "../tooltips/Tooltip.js";
+const D = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, Y = ({
   chips: t,
   onDeleteChip: g,
   containerStyle: f = {},
@@ -18,29 +18,30 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
   isDropdownOpened: u,
   placeholder: C = "Select..",
   errorMessage: a = "",
-  showLabelsOnMoreHover: v = !1
+  showLabelsOnMoreHover: v = !1,
+  placeholderColor: b
 }) => {
-  const [b, x] = s(), [p, y] = s(0), [c, I] = s([]);
-  return w(() => {
+  const [x, y] = s(), [p, I] = s(0), [c, O] = s([]);
+  return L(() => {
     if (!t) return;
     let n = 0;
-    const r = B(t);
+    const r = D(t);
     let o = t.filter((l) => (n += l.label.length, n <= r));
-    o.length === 0 && t.length > 0 && (o = [t[0]]), x(o);
-    const O = t.filter((l) => !o.includes(l)).map((l) => l.label);
-    I(O), y(t.length - o.length);
-  }, [t]), /* @__PURE__ */ m(S, { children: [
-    /* @__PURE__ */ m(F, { style: { ...f }, error: !!a, children: [
+    o.length === 0 && t.length > 0 && (o = [t[0]]), y(o);
+    const S = t.filter((l) => !o.includes(l)).map((l) => l.label);
+    O(S), I(t.length - o.length);
+  }, [t]), /* @__PURE__ */ m(w, { children: [
+    /* @__PURE__ */ m(T, { style: { ...f }, error: !!a, children: [
       /* @__PURE__ */ m("div", { className: "chips-container", children: [
-        b?.map((n, r) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
-          T,
+        x?.map((n, r) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
+          k,
           {
-            tagText: L.truncateText(
+            tagText: R.truncateText(
               n.selectedLabel || n.label,
               40
             ),
             TrailingIcon: () => /* @__PURE__ */ e(
-              E,
+              j,
               {
                 width: 12,
                 height: 12,
@@ -62,7 +63,7 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
               pointerEvents: "auto"
             },
             children: /* @__PURE__ */ e(
-              k,
+              B,
               {
                 body: "",
                 placement: "bottom",
@@ -79,10 +80,16 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
             )
           }
         ),
-        t.length === 0 && /* @__PURE__ */ e("div", { style: { color: d.content.placeholder }, children: C })
+        t.length === 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            style: { color: b ?? d.content.placeholder },
+            children: C
+          }
+        )
       ] }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
-        R,
+        E,
         {
           style: {
             transform: u ? "rotate(180deg)" : "rotate(0deg)"
@@ -93,13 +100,13 @@ const B = (t) => t.length === 1 ? 100 : t.length === 2 ? 40 : 34, V = ({
         }
       ) })
     ] }),
-    !!a && /* @__PURE__ */ m(A, { invalid: !0, children: [
-      !!a && /* @__PURE__ */ e(j, { width: 16, height: 16 }),
+    !!a && /* @__PURE__ */ m(F, { invalid: !0, children: [
+      !!a && /* @__PURE__ */ e(A, { width: 16, height: 16 }),
       a
     ] })
   ] });
 };
 export {
-  V as default
+  Y as default
 };
 //# sourceMappingURL=ChipInput.js.map

package/dist/esm/components/dropdown/ChipInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' | 'small' | 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel || chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel || chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\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\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\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>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div style={{ color: COLORS.content.placeholder }}>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}
+{"version":3,"file":"ChipInput.js","sources":["../../../../src/components/dropdown/ChipInput.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport StringUtils from '@src/utils/StringUtils';\nimport { COLORS } from '@src/constants/Theme';\nimport DownIcon from '../../assets/icons/chevronDown.svg';\nimport CrossIcon from '../../assets/icons/cross.svg';\nimport ErrorIcon from '../../assets/icons/errorInfo.svg';\nimport { InputFooter } from '../input/Input.styled';\nimport { Tag } from '../tag';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption } from '../TypographyStyle';\nimport { ChipInputWrapper } from './Common.styled';\nimport { SingleOption } from './type';\n\ninterface ChipInputProps {\n\tplaceholder?: string;\n\tchips: SingleOption[];\n\tonDeleteChip: (chip: SingleOption) => void;\n\tcontainerStyle?: React.CSSProperties;\n\tisDropdownOpened?: boolean;\n\tsizeToUse?: 'default' | 'small' | 'x-small';\n\terrorMessage?: string;\n\tshowLabelsOnMoreHover?: boolean;\n\tplaceholderColor?: string;\n}\n\nconst getMaxChipsCharCount = (chips: SingleOption[]) => {\n\tif (chips.length === 1) return 100;\n\tif (chips.length === 2) return 40;\n\treturn 34;\n};\n\nconst ChipInput: React.FC<ChipInputProps> = ({\n\tchips,\n\tonDeleteChip,\n\tcontainerStyle = {},\n\tsizeToUse = 'default',\n\tisDropdownOpened,\n\tplaceholder = 'Select..',\n\terrorMessage = '',\n\tshowLabelsOnMoreHover = false,\n\tplaceholderColor,\n}) => {\n\tconst [options, setOptions] = useState<SingleOption[]>();\n\tconst [remainingOptionsCnt, setRemainingOptionsCnt] = useState(0);\n\tconst [remainingOptionsLabels, setRemainingOptionsLabels] = useState<\n\t\tstring[]\n\t>([]);\n\n\tuseEffect(() => {\n\t\tif (!chips) return;\n\t\tlet combineCharCnt = 0;\n\t\tconst MAX_CHAR = getMaxChipsCharCount(chips);\n\t\tlet options = chips.filter((option) => {\n\t\t\tcombineCharCnt += option.label.length;\n\t\t\treturn combineCharCnt <= MAX_CHAR;\n\t\t});\n\t\tif (options.length === 0 && chips.length > 0) {\n\t\t\toptions = [chips[0]];\n\t\t}\n\t\tsetOptions(options);\n\t\tconst remainingChips = chips.filter((option) => !options.includes(option));\n\t\tconst labels = remainingChips.map((option) => option.label);\n\t\tsetRemainingOptionsLabels(labels);\n\t\tsetRemainingOptionsCnt(chips.length - options.length);\n\t}, [chips]);\n\n\treturn (\n\t\t<>\n\t\t\t<ChipInputWrapper style={{ ...containerStyle }} error={!!errorMessage}>\n\t\t\t\t<div className=\"chips-container\">\n\t\t\t\t\t{options?.map((chip, index) => (\n\t\t\t\t\t\t<div key={index} style={{ zIndex: 2 }}>\n\t\t\t\t\t\t\t<Tag\n\t\t\t\t\t\t\t\ttagText={StringUtils.truncateText(\n\t\t\t\t\t\t\t\t\tchip.selectedLabel || chip.label,\n\t\t\t\t\t\t\t\t\t40,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\tTrailingIcon={() => (\n\t\t\t\t\t\t\t\t\t<CrossIcon\n\t\t\t\t\t\t\t\t\t\twidth={12}\n\t\t\t\t\t\t\t\t\t\theight={12}\n\t\t\t\t\t\t\t\t\t\tstyle={{ cursor: 'pointer' }}\n\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\tonDeleteChip(chip);\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{chip.selectedLabel || chip.label}\n\t\t\t\t\t\t\t</Tag>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t\t{!!remainingOptionsCnt && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tposition: 'relative',\n\t\t\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\t\t\tpointerEvents: 'auto',\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Tooltip\n\t\t\t\t\t\t\t\tbody={''}\n\t\t\t\t\t\t\t\tplacement=\"bottom\"\n\t\t\t\t\t\t\t\ttooltipContent={\n\t\t\t\t\t\t\t\t\tshowLabelsOnMoreHover && remainingOptionsLabels.length > 0 ? (\n\t\t\t\t\t\t\t\t\t\t<div style={{ padding: '4px' }}>\n\t\t\t\t\t\t\t\t\t\t\t{remainingOptionsLabels.map((label, index) => (\n\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.text.white }}\n\t\t\t\t\t\t\t\t\t\t\t\t\tkey={index}\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\t\t{label}\n\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t\t</div>\n\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>\n\t\t\t\t\t\t\t\t<BodyCaption color={COLORS.content.placeholder}>\n\t\t\t\t\t\t\t\t\t{`+${remainingOptionsCnt} more`}\n\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{chips.length === 0 && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tstyle={{ color: placeholderColor ?? COLORS.content.placeholder }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{placeholder}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<div>\n\t\t\t\t\t<DownIcon\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\ttransform: isDropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\twidth={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\theight={\n\t\t\t\t\t\t\tsizeToUse === 'x-small' ? 16 : sizeToUse === 'small' ? 20 : 24\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcolor={COLORS.content.primary}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</ChipInputWrapper>\n\t\t\t{!!errorMessage && (\n\t\t\t\t<InputFooter invalid={true}>\n\t\t\t\t\t{!!errorMessage && <ErrorIcon width={16} height={16} />}\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</InputFooter>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nexport default ChipInput;\n"],"names":["getMaxChipsCharCount","chips","ChipInput","onDeleteChip","containerStyle","sizeToUse","isDropdownOpened","placeholder","errorMessage","showLabelsOnMoreHover","placeholderColor","options","setOptions","useState","remainingOptionsCnt","setRemainingOptionsCnt","remainingOptionsLabels","setRemainingOptionsLabels","useEffect","combineCharCnt","MAX_CHAR","option","labels","jsxs","Fragment","ChipInputWrapper","chip","index","jsx","Tag","StringUtils","CrossIcon","Tooltip","label","BodyCaption","COLORS","DownIcon","InputFooter","ErrorIcon"],"mappings":"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"}

package/dist/esm/components/dropdown/Dropdown.d.ts

@@ -4,6 +4,8 @@ export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small' | 'x-small';
     disabled?: boolean;
+    /** When disabled, render a solid grey box (background.base) with secondary text and no opacity wash. */
+    solidDisabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
     placeHolderHeight?: string;

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

@@ -1,158 +1,160 @@
-import { jsx as n, Fragment as b, jsxs as W } from "react/jsx-runtime";
-import { useState as g, useRef as G, useEffect as p } from "react";
-import { COLORS as r, BASE_COLORS as J } from "../../constants/Theme.js";
-import K from "../../assets/icons/chevronDown.svg.js";
-import { InputStyleContext as Q } from "../input/context/InputStyleProvider.js";
-import X from "./ChipInput.js";
-import { DropdownPopover as Y } from "./DropdownPopover/index.js";
-import { getSelectedOptionsAsText as Z } from "./OpenedDropdown/utils/iterationOnOptions.js";
-import { Input as $ } from "../input/Input.js";
+import { jsx as r, Fragment as W, jsxs as k } from "react/jsx-runtime";
+import { useState as x, useRef as J, useEffect as E } from "react";
+import { COLORS as i, BASE_COLORS as K } from "../../constants/Theme.js";
+import Q from "../../assets/icons/chevronDown.svg.js";
+import { InputStyleContext as X } from "../input/context/InputStyleProvider.js";
+import Y from "./ChipInput.js";
+import { DropdownPopover as Z } from "./DropdownPopover/index.js";
+import { getSelectedOptionsAsText as $ } from "./OpenedDropdown/utils/iterationOnOptions.js";
+import { Input as H } from "../input/Input.js";
 function O() {
 }
-const H = ({
-  placeHolder: a,
-  size: E,
+const D = ({
+  placeHolder: s,
+  size: b,
   onSelect: M,
-  defaultOptions: o,
-  disabled: v,
-  noErrorHint: k,
-  placeHolderHeight: x,
-  showPlaceholderWhenSelected: w = !1,
-  inputStyle: A = {},
+  defaultOptions: l,
+  disabled: o,
+  solidDisabled: a,
+  noErrorHint: w,
+  placeHolderHeight: y,
+  showPlaceholderWhenSelected: A = !1,
+  inputStyle: R = {},
   inputType: S = "default",
-  onDeleteChip: R,
-  truncatedText: T,
-  showLeadingIconInPlaceholder: L = !1,
-  showTrailingIconPlaceholder: V = !1,
-  showLabelsOnMoreHover: j = !1,
-  value: l,
-  showSelected: f = !1,
-  onDropdownVisbilityChange: z,
+  onDeleteChip: T,
+  truncatedText: L,
+  showLeadingIconInPlaceholder: V = !1,
+  showTrailingIconPlaceholder: j = !1,
+  showLabelsOnMoreHover: z = !1,
+  value: d,
+  showSelected: m = !1,
+  onDropdownVisbilityChange: F,
   ...t
 }) => {
-  const [c, F] = g(!1), [y, I] = g(!1), i = E ?? "default", B = G(), [s, d] = g(
-    o ?? []
+  const [u, B] = x(!1), [C, I] = x(!1), n = b ?? "default", N = J(), [c, h] = x(
+    l ?? []
   );
-  function N(e) {
-    Array.isArray(e) ? d([...e]) : d([e]), M?.(e);
+  function U(e) {
+    Array.isArray(e) ? h([...e]) : h([e]), M?.(e);
   }
-  p(() => {
+  E(() => {
     const e = [];
-    t?.options?.forEach((h) => {
-      h.options ? h.options.forEach((u) => {
-        u.selected && e.push({
-          ...u,
-          label: u.label
+    t?.options?.forEach((f) => {
+      f.options ? f.options.forEach((v) => {
+        v.selected && e.push({
+          ...v,
+          label: v.label
         });
-      }) : h.selected && e.push(h);
-    }), d([...e]);
-  }, [t.options]), p(() => {
-    o && d([...o]);
-  }, [o]);
-  const U = Z(s), _ = w ? a : U ?? a ?? "Select an option", m = t.buttonWidth, C = m ?? t.width ?? "100%", q = t.dropdownWidth ?? C;
-  return /* @__PURE__ */ n(b, { children: /* @__PURE__ */ n(
-    Q.Provider,
+      }) : f.selected && e.push(f);
+    }), h([...e]);
+  }, [t.options]), E(() => {
+    l && h([...l]);
+  }, [l]);
+  const _ = $(c), q = A ? s : _ ?? s ?? "Select an option", g = t.buttonWidth, p = g ?? t.width ?? "100%", G = t.dropdownWidth ?? p;
+  return /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
+    X.Provider,
     {
       value: {
         InputWrapper: {
-          height: x || (i === "x-small" ? 24 : i === "small" ? 32 : 48),
-          width: C,
-          ...m ? { maxWidth: m } : {},
+          height: y || (n === "x-small" ? 24 : n === "small" ? 32 : 48),
+          width: p,
+          ...g ? { maxWidth: g } : {},
           zIndex: 1,
           cursor: "pointer",
-          padding: i === "x-small" ? "4px 8px" : "6px 8px",
-          backgroundColor: t.version === "3.0" ? c || y ? r.surface.hovered : r.surface.standard : f && l !== void 0 ? J.positive[100] : (
-            // The hover wrapper also contains the popover, so while the
-            // dropdown is open, hovering an option would grey the input
-            // — only show hover feedback while closed.
-            y && !c ? r.background.inactive : r.surface.standard
-          ),
+          padding: n === "x-small" ? "4px 8px" : "6px 8px",
+          backgroundColor: o && a ? i.background.base : t.version === "3.0" ? u || C ? i.surface.hovered : i.surface.standard : m && d !== void 0 ? K.positive[100] : C ? i.background.inactive : i.surface.standard,
           transition: "background-color 0.3s ease",
-          ...A
+          ...R
         },
         input: {
           minHeight: "100%",
           maxWidth: "100%",
-          color: f && l !== void 0 ? r.content.positive : "inherit"
+          color: o && a ? i.content.secondary : m && d !== void 0 ? i.content.positive : "inherit"
         }
       },
-      children: /* @__PURE__ */ n(
+      children: /* @__PURE__ */ r(
         "div",
         {
           onMouseEnter: () => I(!0),
           onMouseLeave: () => I(!1),
           style: t.width ? { width: t.width } : void 0,
-          children: /* @__PURE__ */ W(
-            Y,
+          children: /* @__PURE__ */ k(
+            Z,
             {
               "data-test": t["data-test"],
-              ref: B,
-              onSelect: N,
-              disabled: v,
+              ref: N,
+              onSelect: U,
+              disabled: o,
               ...t,
               onDropdownVisbilityChange: (e) => {
-                F(e), z?.(e);
+                B(e), F?.(e);
               },
-              width: q,
+              width: G,
               children: [
-                S == "default" && /* @__PURE__ */ n(
-                  $,
+                S == "default" && /* @__PURE__ */ r(
+                  H,
                   {
                     version: t.version,
-                    noErrorHint: k,
-                    state: v ? "disabled" : "none",
-                    value: l === void 0 ? _ : l,
+                    noErrorHint: w,
+                    state: o ? "disabled" : "none",
+                    solidDisabled: a,
+                    value: d === void 0 ? q : d,
                     errorMessage: t.error,
-                    variant: i,
-                    placeholder: a ?? "Select an option",
+                    variant: n,
+                    placeholder: s ?? "Select an option",
                     onChangeText: O,
-                    leftIcon: L && s[0]?.leadingIcon ? {
-                      icon: () => /* @__PURE__ */ n(b, { children: s[0]?.leadingIcon })
+                    leftIcon: V && c[0]?.leadingIcon ? {
+                      icon: () => /* @__PURE__ */ r(W, { children: c[0]?.leadingIcon })
                     } : void 0,
                     rightIcon: {
-                      icon: () => /* @__PURE__ */ W(
+                      icon: () => /* @__PURE__ */ k(
                         "div",
                         {
                           style: {
                             display: "flex"
                           },
                           children: [
-                            V && s[0]?.trailingIcon,
-                            /* @__PURE__ */ n(
-                              K,
+                            j && c[0]?.trailingIcon,
+                            /* @__PURE__ */ r(
+                              Q,
                               {
                                 style: {
-                                  transform: c ? "rotate(180deg)" : "rotate(0deg)"
+                                  transform: u ? "rotate(180deg)" : "rotate(0deg)"
                                 },
                                 onClick: O,
-                                width: i === "x-small" ? 16 : i === "small" ? 20 : 24,
-                                height: i === "x-small" ? 16 : i === "small" ? 20 : 24,
-                                color: f ? r.content.positive : r.content.primary
+                                width: n === "x-small" ? 16 : n === "small" ? 20 : 24,
+                                height: n === "x-small" ? 16 : n === "small" ? 20 : 24,
+                                color: m ? i.content.positive : i.content.primary
                               }
                             )
                           ]
                         }
                       )
                     },
-                    truncateText: T ?? !0
+                    truncateText: L ?? !0
                   }
                 ),
-                S == "chip" && /* @__PURE__ */ n(
-                  X,
+                S == "chip" && /* @__PURE__ */ r(
+                  Y,
                   {
-                    placeholder: a ?? "Select options",
-                    chips: s,
+                    placeholder: s ?? "Select options",
+                    placeholderColor: o && a ? i.content.secondary : void 0,
+                    chips: c,
                     onDeleteChip: (e) => {
-                      R?.(e);
+                      T?.(e);
                     },
                     errorMessage: t.error,
-                    isDropdownOpened: c,
-                    sizeToUse: i,
+                    isDropdownOpened: u,
+                    sizeToUse: n,
                     containerStyle: {
                       width: t.width ?? "100%",
-                      cursor: "pointer"
+                      cursor: "pointer",
+                      ...o && a ? {
+                        backgroundColor: i.background.base,
+                        pointerEvents: "none"
+                      } : {}
                     },
-                    showLabelsOnMoreHover: j
+                    showLabelsOnMoreHover: z
                   }
                 )
               ]
@@ -163,8 +165,8 @@ const H = ({
     }
   ) });
 };
-H.displayName = "Dropdown";
+D.displayName = "Dropdown";
 export {
-  H as Dropdown
+  D as Dropdown
 };
 //# sourceMappingURL=Dropdown.js.map