npm - @bikdotai/bik-component-library - Versions diffs - 0.0.829-beta.0 → 0.0.829 - Mend

@bikdotai/bik-component-library 0.0.829-beta.0 → 0.0.829

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

Files changed (333) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckBox.styled.js","sources":["../../../../src/components/checkBox/CheckBox.styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { 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;"}
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';\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":";;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,UAAU,KAAK,EAAG;AAAA,WAC5C,CAACA,MAAWA,EAAM,SAAS,UAAU,KAAK,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOrD,CAACA,MACFA,EAAM,aACHC;AAAA,eACUD,EAAM,SAAS,UAAU,MAAM,CAAC;AAAA,QACvCE,EAAO,QAAQ,QAAQ;AAAA,SAE1BD;AAAA,eACUD,EAAM,SAAS,UAAU,MAAM,CAAC;AAAA,QACvCA,EAAM,eAAe,OAAO;AAAA,MAC9B;AAAA,GACH,CAACA,MACFA,EAAM,WACNC;AAAA;AAAA;AAAA;AAAA,GAIC;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,UACLE,EAAO,OAAO,SAAS,WACvBA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAE1B;AAAA;"}

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts CHANGED Viewed

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import { default as React } from 'react';
 import { CountryCode } from './CountryCodePicker.modal';
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryCodePicker.js.map CHANGED Viewed

	@@ -1 +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":"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"}
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';\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":"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"}

package/dist/esm/components/country-code-picker/CountryPicker.d.ts CHANGED Viewed

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0' | '3.0';
+    version: '1.0' | '2.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/country-code-picker/CountryPicker.js.map CHANGED Viewed

	@@ -1 +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":"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"}
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';\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":";;;;;;;;AAqFO,MAAMA,IAA8C,CAAC;AAAA,EAC3D,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,mBAAAC,IAAoB;AAAA,EACpB,UAAAC,IAAW;AAAA,EACX,eAAAC,IAAgB;AAAA,EAChB,iBAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,iBAAAC,IAAkB;AAAA,EAClB,kBAAAC;AAAA,EACA,iBAAAC;AACD,MAAM;AACL,QAAM,CAACC,GAAyBC,CAA0B,IAAIC,EAE5Dd,CAAe,GAGXe,IAAiBf,KAAmBY,GAEpCI,IAAeD,IAClB,uBAAuBA,EAAe,MAAM,YAAA,CAAa,SACzD,QAEGE,IAAoBC,EAAQ,MAC1BC,EAAc,IAAI,CAACC,MAAY;AACrC,UAAMC,IAAO,uBAAuBD,EAAQ,MAAM,aAAa;AAC/D,WAAO;AAAA,MACN,OAAOA,EAAQ;AAAA,MACf,OAAOA,EAAQ;AAAA,MACf,WAAWA,EAAQ;AAAA,MACnB,mCACEE,GAAA,EACC,UAAA;AAAA,QAAA,CAAChB,uBACA,OAAA,EAAI,KAAKe,GAAM,WAAU,gBAAe,KAAKD,EAAQ,KAAA,CAAM;AAAA,QAE7D,gBAAAG,EAAC,OAAA,EAAI,WAAU,gBACd,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,GAAGhB;AAAA,cAAA;AAAA,cAGH,UAAAU,EAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,UAETX,KACA,gBAAAe;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,OAAOC,EAAO,KAAK;AAAA,gBACnB,UAAU;AAAA,cAAA;AAAA,cAGV,UAAAN,EAAQ;AAAA,YAAA;AAAA,UAAA;AAAA,QACV,EAAA,CAEF;AAAA,MAAA,GACD;AAAA,MAED,UAAUL,GAAgB,SAASK,EAAQ;AAAA,IAAA;AAAA,EAE7C,CAAC,GACC,CAACL,GAAgB,MAAMT,GAAeG,GAAiBC,CAAgB,CAAC,GAErEiB,IAAsB,CAACC,MAAyB;AACrD,UAAMC,IAAkBV,EAAc;AAAA,MACrC,CAACC,MAAYA,EAAQ,SAASQ,EAAO;AAAA,IAAA;AAEtC,IAAIC,MAEC7B,MAAoB,UACvBa,EAA2BgB,CAAe,GAE3C9B,EAAgB8B,CAAe;AAAA,EAEjC;AAEA,SACC,gBAAAL;AAAA,IAACM;AAAA,IAAA;AAAA,MACA,SAAAhC;AAAA,MACA,cAAY;AAAA,MACZ,OAAOG;AAAA,MACP,WAAAE;AAAA,MACA,UAAUC;AAAA,MACV,SAASa;AAAA,MACT,UAAAZ;AAAA,MACA,UAAU,CAACuB,MAAWD,EAAoBC,CAAsB;AAAA,MAEhE,UAAA,gBAAAL;AAAA,QAACQ;AAAA,QAAA;AAAA,UACA,QAAA7B;AAAA,UACA,OAAOK;AAAA,UACP,SAASI;AAAA,UACT,UAAAN;AAAA,UAEA,UAAA;AAAA,YAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,oBACb,UAAAT,IACA,gBAAAQ,EAAAS,GAAA,EACE,UAAA;AAAA,cAAA,CAAC1B,KAAiBU,KAClB,gBAAAQ;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACA,KAAKR;AAAA,kBACL,WAAU;AAAA,kBACV,KAAKD,EAAe;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGtB,gBAAAS,EAACC,GAAA,EAAc,OAAOf,GACpB,YAAe,KAAA,CACjB;AAAA,YAAA,EAAA,CACD,IAEA,gBAAAc;AAAA,cAACC;AAAA,cAAA;AAAA,gBACA,OAAO;AAAA,kBACN,OAAOC,EAAO,KAAK;AAAA,kBACnB,GAAGhB;AAAA,gBAAA;AAAA,gBAGH,UAAAF;AAAA,cAAA;AAAA,YAAA,GAGJ;AAAA,YACA,gBAAAgB;AAAA,cAACS;AAAAA,cAAA;AAAA,gBACA,OAAO;AAAA,gBACP,QAAQ;AAAA,gBACR,OAAO5B,IAAWqB,EAAO,KAAK,WAAWA,EAAO,QAAQ;AAAA,cAAA;AAAA,YAAA;AAAA,UACzD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAGH;"}

package/dist/esm/components/datePicker/DatePicker.styled.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import t from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-const e = (o) => o.selectRange ? `
+const a = (o) => o.selectRange ? `
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     ` : `
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-    `, d = t.div`
+    `, i = t.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
@@ -53,39 +53,6 @@ const e = (o) => o.selectRange ? `
 					background-color: ${r.surface.hovered} !important;
 					border-radius: 4px !important;
 				}
-				/* While picking the end date, the tile under the cursor (the
-				   prospective endpoint) should match the selected start date —
-				   brand background + white text — instead of falling through to
-				   the generic grey :hover above. The in-between preview stays
-				   brandLight (--hover). Scoped to the hover endpoints so normal
-				   single-date hover is unaffected. */
-				&--hoverEnd,
-				&--hoverEnd:enabled:hover {
-					background: ${r.background.brand} !important;
-					color: ${r.text.white} !important;
-					border-color: ${r.background.brand} !important;
-					border-top-left-radius: 0 !important;
-					border-bottom-left-radius: 0 !important;
-					border-top-right-radius: 4px !important;
-					border-bottom-right-radius: 4px !important;
-				}
-				&--hoverStart,
-				&--hoverStart:enabled:hover {
-					background: ${r.background.brand} !important;
-					color: ${r.text.white} !important;
-					border-color: ${r.background.brand} !important;
-					border-top-right-radius: 0 !important;
-					border-bottom-right-radius: 0 !important;
-					border-top-left-radius: 4px !important;
-					border-bottom-left-radius: 4px !important;
-				}
-				&--hoverBothEnds,
-				&--hoverBothEnds:enabled:hover {
-					background: ${r.background.brand} !important;
-					color: ${r.text.white} !important;
-					border-color: ${r.background.brand} !important;
-					border-radius: 4px !important;
-				}
 				&--hasActive:enabled:hover,
 				&--hasActive:enabled:focus {
 					background: ${r.background.brand} !important;
@@ -112,7 +79,7 @@ const e = (o) => o.selectRange ? `
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${(o) => e(o)}
+							${(o) => a(o)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -211,7 +178,7 @@ const e = (o) => o.selectRange ? `
 			background-color: #f0f0f0 !important;
 		}
 	}
-`, i = t.div`
+`, d = t.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -234,9 +201,9 @@ const e = (o) => o.selectRange ? `
 	color: ${r.content.secondary};
 `;
 export {
-  d as PickerContainer,
+  i as PickerContainer,
   b as TimeInputWrapper,
   p as TimeLabel,
-  i as TimePickerContainer
+  d as TimePickerContainer
 };
 //# sourceMappingURL=DatePicker.styled.js.map

package/dist/esm/components/datePicker/DatePicker.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius /\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/ While picking the end date, the tile under the cursor (the\n\t\t\t\t prospective endpoint) should match the selected start date —\n\t\t\t\t brand background + white text — instead of falling through to\n\t\t\t\t the generic grey :hover above. The in-between preview stays\n\t\t\t\t brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":"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"}
1	+ {"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n border-top-right-radius: 0 !important;\n border-bottom-right-radius: 0 !important;\n `;\n\t} else {\n\t\treturn `\n border-top-right-radius: 4px;\n border-bottom-right-radius: 4px;\n `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius */\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":";;AAGA,MAAMA,IAAuB,CAACC,MACzBA,EAAM,cACF;AAAA;AAAA;AAAA,QAKA;AAAA;AAAA;AAAA,OAOIC,IAAkBC,EAAO;AAAA;AAAA;AAAA;AAAA,eAMvBC,EAAO,KAAK,KAAK;AAAA,qBACXA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAgB1BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,WAItBA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUJA,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAS7BA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,mBAK5BA,EAAO,WAAW,KAAK;AAAA,cAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAaXA,EAAO,WAAW,KAAK;AAAA,eAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAO,WAAW,KAAK;AAAA,uBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA,SAIrC,CAACH,MAAUD,EAAqBC,CAAK,CAAC;AAAA;AAAA;AAAA;AAAA,sBAIzBG,EAAO,WAAW,KAAK;AAAA,wBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAa3BA,EAAO,WAAW,KAAK;AAAA,eAC5BA,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,qBAIXA,EAAO,WAAW,KAAK;AAAA,uBACrBA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAS7BA,EAAO,WAAW,UAAU;AAAA,YACjCA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAO,KAAK,KAAK;AAAA;AAAA,mBAEfA,EAAO,WAAW,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAW9BA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBASRA,EAAO,WAAW,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,YAKvCA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,YAInBA,EAAO,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA,iBAIdA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA4B1BC,IAAsBF,EAAO;AAAA;AAAA;AAAA;AAAA,eAI3BC,EAAO,KAAK,KAAK;AAAA;AAAA;AAAA;AAAA,GAMnBE,IAAmBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS1BI,IAAYJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,UAKtBC,EAAO,QAAQ,SAAS;AAAA;"}

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

@@ -19,7 +19,5 @@ export type DropdownProps = OpenDropdownProps & {
     backgroundColor?: string;
     value?: string;
     showSelected?: boolean;
-    /** Fired when the dropdown opens/closes. Runs alongside internal open state. */
-    onDropdownVisbilityChange?: (isOpen: boolean) => void;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

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

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

package/dist/esm/components/dropdown/Dropdown.js.map CHANGED Viewed

	@@ -1 +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\t/** Fired when the dropdown opens/closes. Runs alongside internal open state. /\n\tonDropdownVisbilityChange?: (isOpen: boolean) => void;\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\tonDropdownVisbilityChange,\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\t{...openDropdownProps}\n\t\t\t\t\t\tonDropdownVisbilityChange={(isOpen) => {\n\t\t\t\t\t\t\t// Keep the internal open flag (carat/open styling) AND forward\n\t\t\t\t\t\t\t// to a consumer-provided handler so callers can react to open state.\n\t\t\t\t\t\t\tsetDropdownOpenFlag(isOpen);\n\t\t\t\t\t\t\tonDropdownVisbilityChange?.(isOpen);\n\t\t\t\t\t\t}}\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","onDropdownVisbilityChange","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":"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"}
1	+ {"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":";;;;;;;;;AAoCA,SAASA,IAAO;AAEhB;AAEO,MAAMC,IAAoC,CAAC;AAAA,EACjD,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,6BAAAC,IAA8B;AAAA,EAC9B,YAAAC,IAAa,CAAA;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,cAAAC;AAAA,EACA,eAAAC;AAAA,EACA,8BAAAC,IAA+B;AAAA,EAC/B,6BAAAC,IAA8B;AAAA,EAC9B,uBAAAC,IAAwB;AAAA,EACxB,OAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACJ,MAAM;AACL,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAAS,EAAK,GACxD,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAC5CG,IAAYtB,KAAQ,WACpBuB,IAAwBC,EAAA,GAGxB,CAACC,GAAgBC,CAAiB,IAAIP;AAAA,IAC3CjB,KAAkB,CAAA;AAAA,EAAC;AAEpB,WAASyB,EAAgBC,GAA2C;AACnE,IAAI,MAAM,QAAQA,CAAM,IACvBF,EAAkB,CAAC,GAAGE,CAAM,CAAC,IAE7BF,EAAkB,CAAKE,CAAO,CAAC,GAEhC3B,IAAW2B,CAAM;AAAA,EAClB;AAEA,EAAAC,EAAU,MAAM;AACf,UAAMC,IAAqC,CAAA;AAC3C,IAAAd,GAAmB,SAAS,QAAQ,CAACY,MAAW;AAC/C,MAAKA,EAAyB,UAC5BA,EAAyB,QAAQ,QAAQ,CAACG,MAAO;AACjD,QAAIA,EAAG,YACND,EAAmB,KAAK;AAAA,UACvB,GAAGC;AAAA,UACH,OAAOA,EAAG;AAAA,QAAA,CACV;AAAA,MAEH,CAAC,IAEIH,EAAwB,YAC5BE,EAAmB,KAAKF,CAAsB;AAAA,IAGjD,CAAC,GAEDF,EAAkB,CAAC,GAAGI,CAAkB,CAAC;AAAA,EAC1C,GAAG,CAACd,EAAkB,OAAO,CAAC,GAE9Ba,EAAU,MAAM;AACf,IAAI3B,KACHwB,EAAkB,CAAC,GAAGxB,CAAc,CAAC;AAAA,EAEvC,GAAG,CAACA,CAAc,CAAC;AAEnB,QAAM8B,IAAUC,EAAyBR,CAAc,GACjDS,IAAc5B,IACjBP,IACAiC,KAAWjC,KAAe,oBAEvBoC,IAAqBnB,EAAkB,aAGvCoB,IAAaD,KAAsBnB,EAAkB,SAAS,QAG9DqB,IAAgBrB,EAAkB,iBAAiBoB;AAEzD,SACC,gBAAAE,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,IAACE,EAAkB;AAAA,IAAlB;AAAA,MACA,OAAO;AAAA,QACN,cAAc;AAAA,UACb,QAAQnC,MAELiB,MAAc,YACd,KACAA,MAAc,UACd,KACA;AAAA,UACH,OAAOc;AAAA,UACP,GAAID,IAAqB,EAAE,UAAUA,EAAA,IAAuB,CAAA;AAAA,UAC5D,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,SAASb,MAAc,YAAY,YAAY;AAAA,UAC/C,iBACCP,KAAgBD,MAAU,SACvB2B,EAAO,WAAW,SAAS,QAC3BrB,IACA,YACA;AAAA,UACJ,YAAY;AAAA,UACZ,GAAGb;AAAA,QAAA;AAAA,QAEJ,OAAO;AAAA,UACN,WAAW;AAAA,UACX,UAAU;AAAA,UACV,OACCQ,KAAgBD,MAAU,SACvB2B,EAAO,QAAQ,WACf;AAAA,QAAA;AAAA,MACL;AAAA,MAGD,UAAA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,cAAc,MAAMjB,EAAc,EAAI;AAAA,UACtC,cAAc,MAAMA,EAAc,EAAK;AAAA,UACvC,OACCL,EAAkB,QACf,EAAE,OAAOA,EAAkB,UAC3B;AAAA,UAGJ,UAAA,gBAAA0B;AAAA,YAACC;AAAA,YAAA;AAAA,cACA,aAAW3B,EAAkB,WAAW;AAAA,cACxC,KACCO;AAAA,cAID,UAAUI;AAAA,cACV,UAAAxB;AAAA,cACA,2BAA2B,CAACyC,MAAW1B,EAAoB0B,CAAM;AAAA,cAChE,GAAG5B;AAAA,cACJ,OAAOqB;AAAA,cAEN,UAAA;AAAA,gBAAA7B,KAAa,aACb,gBAAA8B;AAAA,kBAACO;AAAA,kBAAA;AAAA,oBACA,SAAS7B,EAAkB;AAAA,oBAC3B,aAAAZ;AAAA,oBACA,OAAOD,IAAW,aAAa;AAAA,oBAC/B,OAAOW,MAAU,SAAYoB,IAAcpB;AAAA,oBAC3C,cAAcE,EAAkB;AAAA,oBAChC,SAASM;AAAA,oBACT,aAAavB,KAAe;AAAA,oBAC5B,cAAcF;AAAA,oBACd,UACCc,KAAgCc,EAAe,CAAC,GAAG,cAChD;AAAA,sBACA,MAAM,MAAM,gBAAAa,EAAAC,GAAA,EAAG,UAAAd,EAAe,CAAC,GAAG,YAAA,CAAY;AAAA,oBAAA,IAE9C;AAAA,oBAEJ,WAAW;AAAA,sBACV,MAAM,MACL,gBAAAiB;AAAA,wBAAC;AAAA,wBAAA;AAAA,0BACA,OAAO;AAAA,4BACN,SAAS;AAAA,0BAAA;AAAA,0BAGT,UAAA;AAAA,4BAAA9B,KACCa,EAAe,CAAC,GAAoB;AAAA,4BACtC,gBAAAa;AAAA,8BAACQ;AAAAA,8BAAA;AAAA,gCACA,OAAO;AAAA,kCACN,WAAW7B,IACR,mBACA;AAAA,gCAAA;AAAA,gCAEJ,SAASpB;AAAA,gCACT,OACCyB,MAAc,YACX,KACAA,MAAc,UACd,KACA;AAAA,gCAEJ,QACCA,MAAc,YACX,KACAA,MAAc,UACd,KACA;AAAA,gCAEJ,OACCP,IACG0B,EAAO,QAAQ,WACfA,EAAO,QAAQ;AAAA,8BAAA;AAAA,4BAAA;AAAA,0BAEpB;AAAA,wBAAA;AAAA,sBAAA;AAAA,oBACD;AAAA,oBAGF,cAAc/B,KAAiB;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAGhCF,KAAa,UACb,gBAAA8B;AAAA,kBAACS;AAAA,kBAAA;AAAA,oBACA,aAAahD,KAAe;AAAA,oBAC5B,OAAO0B;AAAA,oBACP,cAAc,CAACuB,MAAS;AACvB,sBAAAvC,IAAeuC,CAAI;AAAA,oBACpB;AAAA,oBACA,cAAchC,EAAkB;AAAA,oBAChC,kBAAAC;AAAA,oBACA,WAAAK;AAAA,oBACA,gBAAgB;AAAA,sBACf,OAAON,EAAkB,SAAS;AAAA,sBAClC,QAAQ;AAAA,oBAAA;AAAA,oBAET,uBAAAH;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACD;AAAA,YAAA;AAAA,UAAA;AAAA,QAEF;AAAA,MAAA;AAAA,IACD;AAAA,EAAA,GAEF;AAEF;AAEAf,EAAS,cAAc;"}