@bikdotai/bik-component-library 0.0.804-beta.16 → 0.0.804-beta.18

package/dist/esm/components/button/Button.styled.js.map

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

package/dist/esm/components/button/model.d.ts

@@ -0,0 +1,77 @@
+/// <reference types="react" />
+export type Size = 'xs' | 'chip' | 'small' | 'medium' | 'large';
+export type Type = 'primary' | 'secondary' | 'special' | 'secondaryGray' | 'tertiary' | 'tertiaryGray' | 'destructive' | 'dashBold' | 'dashRegular' | 'text' | 'ai';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    'data-test'?: string;
+    /**
+     * Font fize of the text
+     * @default default 'small'
+     */
+    size?: Size;
+    /**
+     * Text to render inside the button
+     * @default ''
+     */
+    buttonText?: string;
+    /**
+     * Whether the button is pressable or not
+     * @default true
+     */
+    disabled?: boolean;
+    /**
+     * Type of the button
+     * @default 'primary'
+     */
+    buttonType?: Type;
+    /**
+     * The icon component that needs to be render, if text also exists, this would be Trailing component
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    IconComponent?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * The icon component that is to the right of the buttonText
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    LeadingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * Custom styles to be applied to the LeadingIcon
+     * @default undefined
+     */
+    LeadingIconStyles?: React.CSSProperties;
+    /**
+     * The icon component that is the left of the buttonText
+     * Referred to https://ozzie.sh/passing-icons-as-props-in-a-consistent-way-using-react
+     * @default undefined
+     */
+    TrailingIcon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    /**
+     * the button container styling that needs to be override the default one
+     * @default null
+     */
+    style?: React.CSSProperties;
+    /**
+     * Indicates if button is loading and a loading indicator should be shown.
+     * When the button is loading the width of the button should not change.
+     */
+    isLoading?: boolean;
+    /**
+     * Indicates if the styling of the button should be inverse
+     */
+    inverse?: boolean;
+    /**
+     * Will take the width of the parent.
+     * @default false
+     */
+    matchParentWidth?: boolean;
+    subtitle?: string;
+    version?: '1.0' | '2.0' | '3.0';
+    darkMode?: boolean;
+    activated?: boolean;
+    error?: boolean;
+    buttonTextColor?: string;
+    customIconColor?: string;
+    buttonColor?: string;
+    buttonFontSize?: number;
+}

package/dist/esm/components/button/themes.d.ts

@@ -0,0 +1,52 @@
+import { Size, Type } from './model';
+export declare const getBackgroundColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean, buttonColor?: string) => string;
+export declare const getColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean) => string;
+export declare const getDisabledTextColor: (inverse?: boolean) => string;
+export declare const getPadding: (type: Type, size: Size) => "0px" | "3px 6px" | "4px 6px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
+export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?: boolean) => import("styled-components").StyledComponent<"div", any, {
+    numberOfLines?: number | undefined;
+    color?: string | undefined;
+}, never>;
+export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getLinearGradientValue: (size: Size) => string;
+/**
+ * Adjusts the brightness of a given hex color by a specified percentage.
+ * Below function is used to generate a hover effect for button backgrounds.
+ *
+ * @param {string} color - The hex color code to be adjusted (e.g., "#ff0000").
+ * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.
+ * @returns {string} - The adjusted hex color code.
+ *
+ * @example
+ * // Darken the color #ff0000 (red) by 10%
+ * const darkerRed = getHoverButtonBackgroundCustom("#ff0000", 10);
+ * console.log(darkerRed); // Output might be "#e60000"
+ */
+export declare const getHoverButtonBackgroundCustom: (color: string, percent: number) => string;
+/**
+ * Generates a new color by adjusting the brightness of the given color by a specified percentage.
+ *
+ * @param color - The original color in hexadecimal format (e.g., "#RRGGBB").
+ * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.
+ * @returns The new color in hexadecimal format after adjusting the brightness.
+ *
+ * @example
+ * // Lighten the color by 20%
+ * const newColor = getLoadingButtonBackgroundCustom("#ff0000", 20); // "#ff3333"
+ *
+ * @example
+ * // Darken the color by 10%
+ * const newColor = getLoadingButtonBackgroundCustom("#00ff00", -10); // "#00e600"
+ */
+export declare const getLoadingButtonBackgroundCustom: (color: string, percent: number) => string;
+export declare const getHoverButtonBackground: (type: Type, inverse?: boolean) => string;
+export declare const getHoverButtonTextDecorationStyle: (type: Type, disabled?: boolean) => string;
+export declare const generateInverseHoverBackground: (type: Type, disabled?: boolean) => string;
+export declare const generateDisabledStyling: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const getDashedBorderStyling: (type: Type, size: Size, borderColor?: string) => string;
+export declare const getClickEffect: (type: Type, size: Size, inverse?: boolean) => string | undefined;
+export declare const getLoadingBackground: (type: Type, size: Size, inverse?: boolean, buttonColor?: string) => string;
+export declare const getLoadingBorder: (type: Type, size: Size, inverse?: boolean) => string;
+export declare const SpinnerColorMap: (type: Type, inverse?: boolean) => string;
+export declare const getButtonIconColor: (size: Size, type: Type, inverse?: boolean, disabled?: boolean, isLoading?: boolean, darkMode?: boolean) => string | undefined;

package/dist/esm/components/button/themes.js

@@ -1,2 +1,2 @@
-import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},u=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,b=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},x=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},y=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",m=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,k=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,w=(r,n,e,a)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${x(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",I=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,M=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{u as GetButtonTextComponent,I as SpinnerColorMap,$ as generateDisabledStyling,k as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,b as getBorderColor,M as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,y as getHoverButtonBackground,h as getHoverButtonBackgroundCustom,m as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,w as getLoadingBackground,L as getLoadingBorder,x as getLoadingButtonBackgroundCustom,p as getPadding};
+import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("special"===r)return t.background.brandVeryLight;if("secondaryGray"===r)return"transparent";if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("special"===r)return t.background.inverseLight;if("secondaryGray"===r)return t.content.secondary;if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("xs"===r){return"secondary"===t||"special"===t||"secondaryGray"===t?"3px 6px":"4px 6px"}if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},b=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t||"xs"===t?a:"small"===t?o:i:"small"===t?r:n,u=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"special"===n?`border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===n?`border: 1px solid ${t.stroke.primary};`:"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${u(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${u(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",y=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},x=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":"special"===r||"secondaryGray"===r||n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",k=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,m=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"special"===r?`background-color: ${t.background.base}; border: 1px solid ${t.stroke.primary};`:"secondaryGray"===r?`border: 1px solid ${t.stroke.primary};`:"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"special"===r?`background-color: ${t.background.brandLight}; border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===r?`background-color: ${t.surface.hovered}; border: 1px solid ${t.stroke.primary};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,G=(r,n,e,a)=>"special"===r?`background-color: ${t.background.brandVeryLight};`:"secondaryGray"===r?`background-color: ${t.surface.subdued};`:"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${h(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"special"===r?`border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===r?`border: 1px solid ${t.stroke.primary};`:"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",w=(r,n)=>"secondaryGray"===r?t.content.secondary:n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,I=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"special"===n?a?t.content.inactive:t.background.inverseLight:"secondaryGray"===n?a?t.content.inactive:t.content.secondary:"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{b as GetButtonTextComponent,w as SpinnerColorMap,$ as generateDisabledStyling,m as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,u as getBorderColor,I as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,x as getHoverButtonBackground,y as getHoverButtonBackgroundCustom,k as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,G as getLoadingBackground,L as getLoadingBorder,h as getLoadingButtonBackgroundCustom,p as getPadding};
 //# sourceMappingURL=themes.js.map

package/dist/esm/components/button/themes.js.map

@@ -1 +1 @@
-{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight}  !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","surface","hovered","subdued","background","warning","vibrant","inverseLight","negative","getColor","content","inactive","brand","primary","secondary","primaryInverse","ai","stroke","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","ButtonRegularAI","ButtonLargeAI","getBorderColor","error","standard","placeholder","getBorder","version","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","parseInt","replace","amt","Math","round","R","G","B","max","toString","slice","getLoadingButtonBackgroundCustom","min","getHoverButtonBackground","aiLight","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","lightAlt","generateDisabledStyling","getDashedBorderStyling","borderColor","arguments","length","undefined","getClickEffect","brandLight","brandLightAlt","startsWith","getLoadingBackground","base","light","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}
+{"version":3,"file":"themes.js","sources":["../../../../src/components/button/themes.tsx"],"sourcesContent":["import { COLORS } from '@src/constants/Theme';\nimport {\n\tBodyCaption,\n\tBodySecondary,\n\tButtonLarge,\n\tButtonLargeAI,\n\tButtonRegular,\n\tButtonRegularAI,\n} from '../TypographyStyle';\nimport { Size, Type } from './model';\n\nexport const getBackgroundColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n\tbuttonColor?: string,\n): string => {\n\tif (type === 'special') return COLORS.background.brandVeryLight;\n\tif (type === 'secondaryGray') return 'transparent';\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn 'transparent';\n\t\t}\n\t\treturn darkMode ? COLORS.surface.hovered : COLORS.surface.subdued;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn buttonColor\n\t\t\t\t? buttonColor\n\t\t\t\t: inverse\n\t\t\t\t? COLORS.background.warning.vibrant\n\t\t\t\t: COLORS.background.inverseLight;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.background.negative.vibrant;\n\t\tcase 'tertiary':\n\t\t\treturn 'transparent';\n\t\tdefault:\n\t\t\treturn 'transparent';\n\t}\n};\n\nexport const getColor = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tdarkMode?: boolean,\n): string => {\n\tif (type === 'special') return COLORS.background.inverseLight;\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\n\tif (size === 'chip') {\n\t\tif (type === 'text') {\n\t\t\treturn inverse ? COLORS.content.inactive : COLORS.content.brand;\n\t\t}\n\t\treturn darkMode ? COLORS.content.primary : COLORS.content.secondary;\n\t}\n\tswitch (type) {\n\t\tcase 'primary':\n\t\t\treturn inverse ? COLORS.content.primary : COLORS.content.primaryInverse;\n\t\tcase 'tertiaryGray':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'destructive':\n\t\t\treturn COLORS.content.primaryInverse;\n\t\tcase 'dashBold':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'dashRegular':\n\t\t\treturn COLORS.content.secondary;\n\t\tcase 'ai':\n\t\t\treturn COLORS.content.ai;\n\t\tdefault:\n\t\t\treturn inverse ? COLORS.content.primaryInverse : COLORS.stroke.brand;\n\t}\n};\n\nexport const getDisabledTextColor = (inverse?: boolean) => {\n\tif (inverse) {\n\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t}\n\treturn COLORS.content.inactive;\n};\n\nexport const getPadding = (type: Type, size: Size) => {\n\tif (type === 'text') {\n\t\treturn '0px';\n\t} else if (size === 'xs') {\n\t\tconst hasBorder =\n\t\t\ttype === 'secondary' || type === 'special' || type === 'secondaryGray';\n\t\treturn hasBorder ? '3px 6px' : '4px 6px';\n\t} else if (size === 'chip') {\n\t\treturn '4px 8px';\n\t} else if (size === 'small') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '6px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '6px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '6px 12px';\n\t\t}\n\t} else if (size === 'medium') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '10px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '10px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '10px 12px';\n\t\t}\n\t} else if (size === 'large') {\n\t\tswitch (type) {\n\t\t\tcase 'tertiary':\n\t\t\t\treturn '14px 4px';\n\t\t\tcase 'tertiaryGray':\n\t\t\t\treturn '14px 4px';\n\t\t\tdefault:\n\t\t\t\treturn '14px 12px';\n\t\t}\n\t}\n};\nexport const GetButtonTextComponent = (\n\tsize: Size,\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (!disabled && type === 'ai') {\n\t\tif (size === 'small') {\n\t\t\treturn ButtonRegularAI;\n\t\t} else {\n\t\t\treturn ButtonLargeAI;\n\t\t}\n\t}\n\n\tif (type === 'dashRegular') {\n\t\treturn BodySecondary;\n\t}\n\tif (size === 'chip' || size === 'xs') {\n\t\treturn BodyCaption;\n\t} else if (size === 'small') {\n\t\treturn ButtonRegular;\n\t}\n\treturn ButtonLarge;\n};\n\nexport const getBorderColor = (\n\ttype: Type,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (error) {\n\t\treturn COLORS.stroke.negative.vibrant;\n\t}\n\n\tif (inverse) {\n\t\treturn COLORS.surface.standard;\n\t}\n\tif (type == 'secondary') {\n\t\treturn COLORS.stroke.brand;\n\t}\n\treturn COLORS.content.placeholder;\n};\n\nexport const getBorder = (\n\tversion: '1.0' | '2.0' | '3.0',\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\terror?: boolean,\n): string => {\n\tif (type == 'text') {\n\t\treturn 'border: none;';\n\t}\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${\n\t\t\tCOLORS.stroke.primary\n\t\t};`;\n\t}\n\tif (inverse) {\n\t\tif (type === 'secondary') {\n\t\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\t\ttype,\n\t\t\t\tinverse,\n\t\t\t\terror,\n\t\t\t)};`;\n\t\t}\n\t\treturn 'border: none;';\n\t}\n\n\tif (type === 'secondary') {\n\t\treturn `border: ${version === '2.0' ? 0.5 : 1}px solid ${getBorderColor(\n\t\t\ttype,\n\t\t\tfalse,\n\t\t\terror,\n\t\t)};`;\n\t}\n\treturn 'border: none;';\n};\n\nexport const getLinearGradientValue = (size: Size): string => {\n\tif (size === 'medium') {\n\t\treturn `5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px`;\n\t}\n\treturn `6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px`;\n};\n\n/**\n * Adjusts the brightness of a given hex color by a specified percentage.\n * Below function is used to generate a hover effect for button backgrounds.\n *\n * @param {string} color - The hex color code to be adjusted (e.g., \"#ff0000\").\n * @param {number} percent - The percentage by which to darken the color. Positive values darken the color.\n * @returns {string} - The adjusted hex color code.\n *\n * @example\n * // Darken the color #ff0000 (red) by 10%\n * const darkerRed = getHoverButtonBackgroundCustom(\"#ff0000\", 10);\n * console.log(darkerRed); // Output might be \"#e60000\"\n */\n\nexport const getHoverButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) - amt,\n\t\tG = ((num >> 8) & 0x00ff) - amt,\n\t\tB = (num & 0x0000ff) - amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.max(R, 0) << 16) +\n\t\t(Math.max(G, 0) << 8) +\n\t\tMath.max(B, 0)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\n/**\n * Generates a new color by adjusting the brightness of the given color by a specified percentage.\n *\n * @param color - The original color in hexadecimal format (e.g., \"#RRGGBB\").\n * @param percent - The percentage to adjust the brightness. Positive values will lighten the color, while negative values will darken it.\n * @returns The new color in hexadecimal format after adjusting the brightness.\n *\n * @example\n * // Lighten the color by 20%\n * const newColor = getLoadingButtonBackgroundCustom(\"#ff0000\", 20); // \"#ff3333\"\n *\n * @example\n * // Darken the color by 10%\n * const newColor = getLoadingButtonBackgroundCustom(\"#00ff00\", -10); // \"#00e600\"\n */\nexport const getLoadingButtonBackgroundCustom = (\n\tcolor: string,\n\tpercent: number,\n) => {\n\tconst num = parseInt(color.replace('#', ''), 16),\n\t\tamt = Math.round(2.55 * percent),\n\t\tR = (num >> 16) + amt,\n\t\tG = ((num >> 8) & 0x00ff) + amt,\n\t\tB = (num & 0x0000ff) + amt;\n\n\treturn `#${(\n\t\t0x1000000 +\n\t\t(Math.min(R, 255) << 16) +\n\t\t(Math.min(G, 255) << 8) +\n\t\tMath.min(B, 255)\n\t)\n\t\t.toString(16)\n\t\t.slice(1)}`;\n};\n\nexport const getHoverButtonBackground = (type: Type, inverse?: boolean) => {\n\tif (type === 'ai') {\n\t\treturn `background: ${COLORS.surface.aiLight};`;\n\t}\n\n\tif (type === 'text') {\n\t\treturn `background-color:transparent;`;\n\t}\n\tif (type === 'special' || type === 'secondaryGray') {\n\t\treturn '';\n\t}\n\tif (!inverse && type !== 'primary') {\n\t\treturn `background-color: #000000;\n\t\t\t\topacity: 0.03;`;\n\t}\n\n\treturn ``;\n};\n\nexport const getHoverButtonTextDecorationStyle = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\treturn `text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n};\n\nexport const generateInverseHoverBackground = (\n\ttype: Type,\n\tdisabled?: boolean,\n) => {\n\tif (disabled) {\n\t\treturn '';\n\t}\n\tif (type === 'primary') {\n\t\treturn `background-color: ${COLORS.stroke.warning.lightAlt};`;\n\t}\n\treturn `background-color: rgba(255, 255, 255, 0.1)`;\n};\n\nexport const generateDisabledStyling = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.base}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: transparent;`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\treturn inverse\n\t\t\t? 'background-color: rgba(255,255,255,0.3);'\n\t\t\t: `background-color: ${COLORS.background.inactive};`;\n\t} else if (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid rgba(255, 255, 255, 0.5);`\n\t\t\t: `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\treturn '';\n};\n\nexport const getDashedBorderStyling = (\n\ttype: Type,\n\tsize: Size,\n\tborderColor: string = getBorderColor(type, false),\n) => {\n\treturn `\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${borderColor},\n\t\t\t${borderColor}\n\t\t\t\t${getLinearGradientValue(size)}\n\t\t);\n\t}\n\t`;\n};\n\nexport const getClickEffect = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'text') {\n\t\treturn `background-color: ${COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${COLORS.content.brand};`;\n\t}\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandLight}; border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.hovered}; border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${COLORS.background.brandLight};`;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\treturn `background-color: ${COLORS.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`;\n\t\t}\n\t\treturn 'box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);';\n\t} else if (\n\t\ttype === 'secondary' ||\n\t\ttype === 'tertiary' ||\n\t\ttype === 'tertiaryGray' ||\n\t\ttype.startsWith('dash')\n\t) {\n\t\treturn inverse\n\t\t\t? `background-color: ${COLORS.background.inverseLight}  !important;`\n\t\t\t: `background-color: ${COLORS.background.brandLight};`;\n\t}\n};\nexport const getLoadingBackground = (\n\ttype: Type,\n\tsize: Size,\n\tinverse?: boolean,\n\tbuttonColor?: string,\n) => {\n\tif (type === 'special') {\n\t\treturn `background-color: ${COLORS.background.brandVeryLight};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `background-color: ${COLORS.surface.subdued};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `background-color: ${COLORS.background.base};`;\n\t}\n\tif (type === 'primary') {\n\t\tif (buttonColor) {\n\t\t\treturn `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\tbuttonColor,\n\t\t\t\t50,\n\t\t\t)};`;\n\t\t}\n\t\treturn `background-color: ${\n\t\t\tinverse ? COLORS.background.warning.vibrant : COLORS.background.brandLight\n\t\t};`;\n\t}\n\tif (type === 'destructive') {\n\t\treturn `background-color: ${COLORS.background.negative.light};`;\n\t}\n\treturn 'background-color: transparent;';\n};\n\nexport const getLoadingBorder = (type: Type, size: Size, inverse?: boolean) => {\n\tif (type === 'special') {\n\t\treturn `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn `border: 1px solid ${COLORS.stroke.primary};`;\n\t}\n\tif (size === 'chip') {\n\t\treturn `border: none;`;\n\t}\n\tif (type === 'secondary') {\n\t\treturn inverse\n\t\t\t? `border: 1px solid ${COLORS.content.secondary};`\n\t\t\t: `border: 1px solid ${COLORS.stroke.brandLightAlt};`;\n\t}\n\treturn '';\n};\n\nexport const SpinnerColorMap = (type: Type, inverse?: boolean) => {\n\tif (type === 'secondaryGray') return COLORS.content.secondary;\n\tif (inverse) {\n\t\tif (type === 'primary') {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t}\n\tif (type === 'destructive') {\n\t\treturn COLORS.content.negative;\n\t}\n\treturn COLORS.content.brand;\n};\n\nexport const getButtonIconColor = (\n\tsize: Size,\n\ttype: Type,\n\tinverse?: boolean,\n\tdisabled?: boolean,\n\tisLoading?: boolean,\n\tdarkMode?: boolean,\n) => {\n\tif (size === 'chip') {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t} else if (darkMode) {\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n\tif (isLoading) {\n\t\treturn 'transparent';\n\t}\n\tif (type === 'special') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.background.inverseLight;\n\t}\n\tif (type === 'secondaryGray') {\n\t\treturn disabled ? COLORS.content.inactive : COLORS.content.secondary;\n\t}\n\tif (type === 'primary' || type === 'destructive') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primary;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.primaryInverse;\n\t} else if (type === 'secondary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiary') {\n\t\tif (inverse) {\n\t\t\tif (disabled) {\n\t\t\t\treturn 'rgba(255, 255, 255, 0.5)';\n\t\t\t}\n\t\t\treturn COLORS.content.primaryInverse;\n\t\t}\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.brand;\n\t} else if (type === 'tertiaryGray' || type.startsWith('dash')) {\n\t\tif (disabled) {\n\t\t\treturn COLORS.content.inactive;\n\t\t}\n\t\treturn COLORS.content.secondary;\n\t}\n};\n"],"names":["getBackgroundColor","type","size","inverse","darkMode","buttonColor","COLORS","background","brandVeryLight","surface","hovered","subdued","warning","vibrant","inverseLight","negative","getColor","content","secondary","inactive","brand","primary","primaryInverse","ai","stroke","getDisabledTextColor","getPadding","GetButtonTextComponent","disabled","BodySecondary","BodyCaption","ButtonRegular","ButtonLarge","ButtonRegularAI","ButtonLargeAI","getBorderColor","error","standard","placeholder","getBorder","version","brandLightAlt","getLinearGradientValue","getHoverButtonBackgroundCustom","color","percent","num","parseInt","replace","amt","Math","round","R","G","B","max","toString","slice","getLoadingButtonBackgroundCustom","min","getHoverButtonBackground","aiLight","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","lightAlt","generateDisabledStyling","base","getDashedBorderStyling","borderColor","arguments","length","undefined","getClickEffect","brandLight","startsWith","getLoadingBackground","light","getLoadingBorder","SpinnerColorMap","getButtonIconColor","isLoading"],"mappings":"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"}

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

@@ -0,0 +1,19 @@
+import { Placement, PositioningStrategy } from '@popperjs/core';
+import React from 'react';
+import { CountryCode } from "./CountryCodePicker.modal";
+export declare const CountryCodePicker: React.FC<{
+    version: '1.0' | '2.0' | '3.0';
+    onCountrySelect: (country: CountryCode) => void;
+    selectedCountry: CountryCode;
+    popoverWidth?: string;
+    height?: string;
+    placement?: Placement;
+    placementStrategy?: PositioningStrategy;
+    disabled?: boolean;
+    hideFlagImage?: boolean;
+    containerStyles?: React.CSSProperties;
+    codeColor?: string;
+    dialColor?: string;
+    countryTextStyle?: React.CSSProperties;
+    onDropdownClick?: () => void;
+}>;

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

@@ -1 +1 @@
-{"version":3,"file":"CountryCodePicker.js","sources":["../../../../src/components/country-code-picker/CountryCodePicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useEffect, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryPickerOption,\n\tStyledCountryPickerWrapper,\n} from '@src/components/country-code-picker/CountryCodePicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const CountryCodePicker: React.FC<{\n\tversion: '1.0' | '2.0';\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","_a","name","dial","code","selectedFlag","_b","toLowerCase","useEffect","_c","_jsx","DropdownPopover","Object","assign","version","isSearchable","width","_d","popoverWidth","placement","_e","strategy","_f","placementStrategy","options","CountriesData","map","country","flag","value","label","searchKey","customComponent","_jsxs","StyledCountryPickerOption","children","hideFlagImage","src","className","alt","BodySecondary","style","countryTextStyle","color","codeColor","COLORS","text","primary","dialColor","selected","disabled","onSelect","option","matchingOption","filter","onCountrySelect","StyledCountryPickerWrapper","height","containerStyles","onClick","console","log","onDropdownClick","call","_g","DownIcon","content"],"mappings":"gyCAgBaA,MAAAA,EAePC,sBACL,MAAOC,EAAiBC,GAAsBC,EAKpB,QAAzBC,EAAAJ,EAAMC,uBAAmB,IAAAG,EAAAA,EAAA,CACxBC,KAAM,QACNC,KAAM,MACNC,KAAM,OAGFC,EAAe,uBAA6C,QAAtBC,EAAAR,EAAgBM,YAAM,IAAAE,OAAA,EAAAA,EAAAC,oBAElEC,GAAU,KACLX,EAAMC,iBACTC,EAAmBF,EAAMC,gBACzB,GACC,CAAwB,QAAvBW,EAAAZ,EAAMC,uBAAiB,IAAAW,OAAA,EAAAA,EAAAL,OA2C3B,OACCM,EAACC,EACAC,OAAAC,OAAA,CAAAC,QAASjB,EAAMiB,QACfC,cAAY,EACZC,MAAyB,QAAlBC,EAAApB,EAAMqB,oBAAY,IAAAD,EAAAA,EAAI,QAC7BE,kBAAWC,EAAAvB,EAAMsB,yBAAa,eAC9BE,SAAqC,QAA3BC,EAAAzB,EAAM0B,yBAAqB,IAAAD,EAAAA,EAAA,WACrCE,QA/CMC,EAAcC,KAAKC,gBACzB,MAAMC,EAAO,uBAAqC,QAAd3B,EAAA0B,EAAQvB,YAAM,IAAAH,OAAA,EAAAA,EAAAM,oBAClD,MAAO,CACNsB,MAAOF,EAAQvB,KACf0B,MAAOH,EAAQxB,KACf4B,UAAWJ,EAAQzB,KACnB8B,gBACCC,EAACC,EACC,CAAAC,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKT,EACLU,UAAU,uBACVC,IAAKZ,EAAQzB,OAIf+B,EAACO,EAAc5B,OAAAC,OAAA,CAAA4B,MAA6B,QAAtBnC,EAAAT,EAAM6C,wBAAgB,IAAApC,EAAAA,EAAI,IAC/C,CAAA6B,SAAA,CAAAzB,EAAA,OAAAE,OAAAC,OAAA,CACC4B,MAAO,CACNE,cAAOlC,EAAAZ,EAAM+C,yBAAaC,EAAOC,KAAKC,UAGtC,CAAAZ,SAAAR,EAAQvB,QAET,KACDM,EACC,OAAAE,OAAAC,OAAA,CAAA4B,MAAO,CACNE,cAAO1B,EAAApB,EAAMmD,yBAAaH,EAAOC,KAAKC,UACtC,CAAAZ,SAEAR,EAAQxB,eAKb8C,SAAUnD,EAAgBM,OAASuB,EAAQvB,KAC3C,IAYD8C,SAAUrD,EAAMqD,SAChBC,SAAWC,IACV,MAAMC,EAAiB5B,EAAc6B,QACnC3B,GAAYA,EAAQvB,OAAUgD,EAAwBvB,QAExD9B,EAAmBsD,EAAe,IAClCxD,EAAM0D,gBAAgBF,EAAe,GAAG,aAGzCpB,EAACuB,iBACAC,OAAQ5D,EAAM4D,OACdhB,MAAO5C,EAAM6D,gBACbC,QAASA,WACRC,QAAQC,IAAI,SACS,QAArB5D,EAAAJ,EAAMiE,uBAAe,IAAA7D,GAAAA,EAAA8D,KAAAlE,EAAI,GAG1B,CAAAsC,SAAA,CAAAF,EAAA,MAAArB,OAAAC,OAAA,CAAKyB,UAAU,oBACb,CAAAH,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKhC,EACLiC,UAAU,gCACVC,IAAKzC,EAAgBI,OAGvBQ,EAAC8B,iBAAcC,MAAiC,QAA1BuB,EAAAnE,EAAM6C,wBAAoB,IAAAsB,EAAAA,EAAA,CAAA,aAC9ClE,EAAgBK,YAGnBO,EAACuD,GAASjD,MAAO,GAAIyC,OAAQ,GAAId,MAAOE,EAAOqB,QAAQnB,gBAEvC"}
+{"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","_a","name","dial","code","selectedFlag","_b","toLowerCase","useEffect","_c","_jsx","DropdownPopover","Object","assign","version","isSearchable","width","_d","popoverWidth","placement","_e","strategy","_f","placementStrategy","options","CountriesData","map","country","flag","value","label","searchKey","customComponent","_jsxs","StyledCountryPickerOption","children","hideFlagImage","src","className","alt","BodySecondary","style","countryTextStyle","color","codeColor","COLORS","text","primary","dialColor","selected","disabled","onSelect","option","matchingOption","filter","onCountrySelect","StyledCountryPickerWrapper","height","containerStyles","onClick","console","log","onDropdownClick","call","_g","DownIcon","content"],"mappings":"gyCAgBaA,MAAAA,EAePC,sBACL,MAAOC,EAAiBC,GAAsBC,EAKpB,QAAzBC,EAAAJ,EAAMC,uBAAmB,IAAAG,EAAAA,EAAA,CACxBC,KAAM,QACNC,KAAM,MACNC,KAAM,OAGFC,EAAe,uBAA6C,QAAtBC,EAAAR,EAAgBM,YAAM,IAAAE,OAAA,EAAAA,EAAAC,oBAElEC,GAAU,KACLX,EAAMC,iBACTC,EAAmBF,EAAMC,gBACzB,GACC,CAAwB,QAAvBW,EAAAZ,EAAMC,uBAAiB,IAAAW,OAAA,EAAAA,EAAAL,OA2C3B,OACCM,EAACC,EACAC,OAAAC,OAAA,CAAAC,QAASjB,EAAMiB,QACfC,cAAY,EACZC,MAAyB,QAAlBC,EAAApB,EAAMqB,oBAAY,IAAAD,EAAAA,EAAI,QAC7BE,kBAAWC,EAAAvB,EAAMsB,yBAAa,eAC9BE,SAAqC,QAA3BC,EAAAzB,EAAM0B,yBAAqB,IAAAD,EAAAA,EAAA,WACrCE,QA/CMC,EAAcC,KAAKC,gBACzB,MAAMC,EAAO,uBAAqC,QAAd3B,EAAA0B,EAAQvB,YAAM,IAAAH,OAAA,EAAAA,EAAAM,oBAClD,MAAO,CACNsB,MAAOF,EAAQvB,KACf0B,MAAOH,EAAQxB,KACf4B,UAAWJ,EAAQzB,KACnB8B,gBACCC,EAACC,EACC,CAAAC,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKT,EACLU,UAAU,uBACVC,IAAKZ,EAAQzB,OAIf+B,EAACO,EAAc5B,OAAAC,OAAA,CAAA4B,MAA6B,QAAtBnC,EAAAT,EAAM6C,wBAAgB,IAAApC,EAAAA,EAAI,IAC/C,CAAA6B,SAAA,CAAAzB,EAAA,OAAAE,OAAAC,OAAA,CACC4B,MAAO,CACNE,cAAOlC,EAAAZ,EAAM+C,yBAAaC,EAAOC,KAAKC,UAGtC,CAAAZ,SAAAR,EAAQvB,QAET,KACDM,EACC,OAAAE,OAAAC,OAAA,CAAA4B,MAAO,CACNE,cAAO1B,EAAApB,EAAMmD,yBAAaH,EAAOC,KAAKC,UACtC,CAAAZ,SAEAR,EAAQxB,eAKb8C,SAAUnD,EAAgBM,OAASuB,EAAQvB,KAC3C,IAYD8C,SAAUrD,EAAMqD,SAChBC,SAAWC,IACV,MAAMC,EAAiB5B,EAAc6B,QACnC3B,GAAYA,EAAQvB,OAAUgD,EAAwBvB,QAExD9B,EAAmBsD,EAAe,IAClCxD,EAAM0D,gBAAgBF,EAAe,GAAG,aAGzCpB,EAACuB,iBACAC,OAAQ5D,EAAM4D,OACdhB,MAAO5C,EAAM6D,gBACbC,QAASA,WACRC,QAAQC,IAAI,SACS,QAArB5D,EAAAJ,EAAMiE,uBAAe,IAAA7D,GAAAA,EAAA8D,KAAAlE,EAAI,GAG1B,CAAAsC,SAAA,CAAAF,EAAA,MAAArB,OAAAC,OAAA,CAAKyB,UAAU,oBACb,CAAAH,SAAA,EAACtC,EAAMuC,eACP1B,EAAA,MAAA,CACC2B,IAAKhC,EACLiC,UAAU,gCACVC,IAAKzC,EAAgBI,OAGvBQ,EAAC8B,iBAAcC,MAAiC,QAA1BuB,EAAAnE,EAAM6C,wBAAoB,IAAAsB,EAAAA,EAAA,CAAA,aAC9ClE,EAAgBK,YAGnBO,EAACuD,GAASjD,MAAO,GAAIyC,OAAQ,GAAId,MAAOE,EAAOqB,QAAQnB,gBAEvC"}

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

@@ -0,0 +1,72 @@
+import { Placement, PositioningStrategy } from '@popperjs/core';
+import React from 'react';
+import { CountryCode } from "./CountryCodePicker.modal";
+/**
+ * Props for the CountryPicker component
+ */
+export interface CountryPickerProps {
+    /**
+     * Version of the dropdown popover to use
+     */
+    version: '1.0' | '2.0' | '3.0';
+    /**
+     * Callback function when a country is selected
+     */
+    onCountrySelect: (country: CountryCode) => void;
+    /**
+     * Currently selected country
+     */
+    selectedCountry?: CountryCode;
+    /**
+     * Width of the popover dropdown
+     * @default "300px"
+     */
+    popoverWidth?: string;
+    /**
+     * Height of the picker container
+     */
+    height?: string;
+    /**
+     * Placement of the dropdown relative to the trigger
+     * @default "bottom-start"
+     */
+    placement?: Placement;
+    /**
+     * Positioning strategy for the dropdown
+     * @default "absolute"
+     */
+    placementStrategy?: PositioningStrategy;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to hide the flag image
+     * @default false
+     */
+    hideFlagImage?: boolean;
+    /**
+     * Custom styles for the container
+     */
+    containerStyles?: React.CSSProperties;
+    /**
+     * Placeholder text when no country is selected
+     * @default "Select a country"
+     */
+    placeholder?: string;
+    /**
+     * Whether to show country code alongside name
+     * @default true
+     */
+    showCountryCode?: boolean;
+    /**
+     * Custom text style for the country name
+     */
+    countryTextStyle?: React.CSSProperties;
+    /**
+     * Callback when dropdown is clicked
+     */
+    onDropdownClick?: () => void;
+}
+export declare const CountryPicker: React.FC<CountryPickerProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"CountryPicker.js","sources":["../../../../src/components/country-code-picker/CountryPicker.tsx"],"sourcesContent":["import { Placement, PositioningStrategy } from '@popperjs/core';\nimport DownIcon from '@src/assets/icons/chevronDown.svg';\nimport React, { useMemo, useState } from 'react';\nimport {\n\tCountriesData,\n\tCountryCode,\n} from '@src/components/country-code-picker/CountryCodePicker.modal';\nimport {\n\tStyledCountryOption,\n\tStyledCountryPickerContainer,\n} from '@src/components/country-code-picker/CountryPicker.styled';\nimport { DropdownPopover } from '@src/components/dropdown';\nimport { DropdownOption, SingleOption } from '@src/components/dropdown/type';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\n\n/**\n * Props for the CountryPicker component\n */\nexport interface CountryPickerProps {\n\t/**\n\t * Version of the dropdown popover to use\n\t */\n\tversion: '1.0' | '2.0';\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","_ref","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","_a","code","toLowerCase","undefined","getCountryOptions","useMemo","CountriesData","map","country","flag","value","label","name","searchKey","customComponent","_jsxs","StyledCountryOption","children","_jsx","src","className","alt","Object","assign","BodySecondary","style","color","COLORS","text","primary","secondary","fontSize","selected","DropdownPopover","isSearchable","width","strategy","options","onSelect","option","matchingCountry","find","handleCountrySelect","StyledCountryPickerContainer","onClick","_Fragment","DownIcon","content"],"mappings":"oyCAqFaA,MAAAA,EAA8CC,IAetD,IAfuDC,QAC3DA,EAAOC,gBACPA,EAAeC,gBACfA,EAAeC,aACfA,EAAe,QAAOC,OACtBA,EAAMC,UACNA,EAAY,eAAcC,kBAC1BA,EAAoB,WAAUC,SAC9BA,GAAW,EAAKC,cAChBA,GAAgB,EAAKC,gBACrBA,EAAeC,YACfA,EAAc,mBAAkBC,gBAChCA,GAAkB,EAAIC,iBACtBA,EAAgBC,gBAChBA,GACAd,QACA,MAAOe,EAAyBC,GAA8BC,EAE5Dd,GAGIe,EAAiBf,QAAAA,EAAmBY,EAEpCI,EAAeD,yBACwB,QAAnBE,EAAAF,EAAeG,YAAI,IAAAD,OAAA,EAAAA,EAAEE,yBAC5CC,EAEGC,EAAoBC,GAAQ,IAC1BC,EAAcC,KAAKC,UACzB,MAAMC,EAAO,uBAAqC,QAAdT,EAAAQ,EAAQP,YAAM,IAAAD,OAAA,EAAAA,EAAAE,oBAClD,MAAO,CACNQ,MAAOF,EAAQP,KACfU,MAAOH,EAAQI,KACfC,UAAWL,EAAQI,KACnBE,gBACCC,EAACC,EAAmB,CAAAC,SAAA,EACjB5B,GACD6B,EAAK,MAAA,CAAAC,IAAKV,EAAMW,UAAU,eAAeC,IAAKb,EAAQI,OAEvDG,EAAA,MAAAO,OAAAC,OAAA,CAAKH,UAAU,gBACd,CAAAH,SAAA,CAAAC,EAACM,EAAaF,OAAAC,OAAA,CACbE,MAAKH,OAAAC,OAAA,CACJG,MAAOC,EAAOC,KAAKC,SAChBpC,IAAgB,CAAAwB,SAGnBT,EAAQI,QAETpB,GACA0B,EAACM,EACAF,OAAAC,OAAA,CAAAE,MAAO,CACNC,MAAOC,EAAOC,KAAKE,UACnBC,SAAU,SACV,CAAAd,SAEAT,EAAQP,eAMd+B,UAAUlC,aAAc,EAAdA,EAAgBG,QAASO,EAAQP,KAC3C,KAEA,CAACH,eAAAA,EAAgBG,KAAMZ,EAAeG,EAAiBC,IAe1D,OACCyB,EAACe,EACAX,OAAAC,OAAA,CAAA1C,QAASA,EACTqD,cAAY,EACZC,MAAOnD,EACPE,UAAWA,EACXkD,SAAUjD,EACVkD,QAASjC,EACThB,SAAUA,EACVkD,SAAWC,GAtBgBA,KAC5B,MAAMC,EAAkBlC,EAAcmC,MACpCjC,GAAYA,EAAQP,OAASsC,EAAO7B,QAElC8B,SAEqBrC,IAApBpB,GACHa,EAA2B4C,GAE5B1D,EAAgB0D,GAChB,EAYsBE,CAAoBH,IAAuB,CAAAtB,SAEjEF,EAAC4B,EAA4BrB,OAAAC,OAAA,CAC5BtC,OAAQA,EACRwC,MAAOnC,EACPsD,QAASlD,EACTN,SAAUA,GAAQ,CAAA6B,SAAA,CAElBC,EAAK,MAAAI,OAAAC,OAAA,CAAAH,UAAU,oBAAkB,CAAAH,SAC/BnB,EACAiB,EAAA8B,EAAA,CAAA5B,SAAA,EACG5B,GAAiBU,GAClBmB,EACC,MAAA,CAAAC,IAAKpB,EACLqB,UAAU,eACVC,IAAKvB,EAAec,OAGtBM,EAACM,EAAaF,OAAAC,OAAA,CAACE,MAAOhC,aACpBK,EAAec,WAIlBM,EAACM,EACAF,OAAAC,OAAA,CAAAE,qBACCC,MAAOC,EAAOC,KAAKxC,UAChBK,IAAgB,CAAAwB,SAGnB1B,QAIJ2B,EAAC4B,EAAQ,CACRX,MAAO,GACPlD,OAAQ,GACRyC,MAAOtC,EAAWuC,EAAOC,KAAKxC,SAAWuC,EAAOoB,QAAQlB,gBAGzC"}
+{"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","_ref","version","onCountrySelect","selectedCountry","popoverWidth","height","placement","placementStrategy","disabled","hideFlagImage","containerStyles","placeholder","showCountryCode","countryTextStyle","onDropdownClick","internalSelectedCountry","setInternalSelectedCountry","useState","currentCountry","selectedFlag","_a","code","toLowerCase","undefined","getCountryOptions","useMemo","CountriesData","map","country","flag","value","label","name","searchKey","customComponent","_jsxs","StyledCountryOption","children","_jsx","src","className","alt","Object","assign","BodySecondary","style","color","COLORS","text","primary","secondary","fontSize","selected","DropdownPopover","isSearchable","width","strategy","options","onSelect","option","matchingCountry","find","handleCountrySelect","StyledCountryPickerContainer","onClick","_Fragment","DownIcon","content"],"mappings":"oyCAqFaA,MAAAA,EAA8CC,IAetD,IAfuDC,QAC3DA,EAAOC,gBACPA,EAAeC,gBACfA,EAAeC,aACfA,EAAe,QAAOC,OACtBA,EAAMC,UACNA,EAAY,eAAcC,kBAC1BA,EAAoB,WAAUC,SAC9BA,GAAW,EAAKC,cAChBA,GAAgB,EAAKC,gBACrBA,EAAeC,YACfA,EAAc,mBAAkBC,gBAChCA,GAAkB,EAAIC,iBACtBA,EAAgBC,gBAChBA,GACAd,QACA,MAAOe,EAAyBC,GAA8BC,EAE5Dd,GAGIe,EAAiBf,QAAAA,EAAmBY,EAEpCI,EAAeD,yBACwB,QAAnBE,EAAAF,EAAeG,YAAI,IAAAD,OAAA,EAAAA,EAAEE,yBAC5CC,EAEGC,EAAoBC,GAAQ,IAC1BC,EAAcC,KAAKC,UACzB,MAAMC,EAAO,uBAAqC,QAAdT,EAAAQ,EAAQP,YAAM,IAAAD,OAAA,EAAAA,EAAAE,oBAClD,MAAO,CACNQ,MAAOF,EAAQP,KACfU,MAAOH,EAAQI,KACfC,UAAWL,EAAQI,KACnBE,gBACCC,EAACC,EAAmB,CAAAC,SAAA,EACjB5B,GACD6B,EAAK,MAAA,CAAAC,IAAKV,EAAMW,UAAU,eAAeC,IAAKb,EAAQI,OAEvDG,EAAA,MAAAO,OAAAC,OAAA,CAAKH,UAAU,gBACd,CAAAH,SAAA,CAAAC,EAACM,EAAaF,OAAAC,OAAA,CACbE,MAAKH,OAAAC,OAAA,CACJG,MAAOC,EAAOC,KAAKC,SAChBpC,IAAgB,CAAAwB,SAGnBT,EAAQI,QAETpB,GACA0B,EAACM,EACAF,OAAAC,OAAA,CAAAE,MAAO,CACNC,MAAOC,EAAOC,KAAKE,UACnBC,SAAU,SACV,CAAAd,SAEAT,EAAQP,eAMd+B,UAAUlC,aAAc,EAAdA,EAAgBG,QAASO,EAAQP,KAC3C,KAEA,CAACH,eAAAA,EAAgBG,KAAMZ,EAAeG,EAAiBC,IAe1D,OACCyB,EAACe,EACAX,OAAAC,OAAA,CAAA1C,QAASA,EACTqD,cAAY,EACZC,MAAOnD,EACPE,UAAWA,EACXkD,SAAUjD,EACVkD,QAASjC,EACThB,SAAUA,EACVkD,SAAWC,GAtBgBA,KAC5B,MAAMC,EAAkBlC,EAAcmC,MACpCjC,GAAYA,EAAQP,OAASsC,EAAO7B,QAElC8B,SAEqBrC,IAApBpB,GACHa,EAA2B4C,GAE5B1D,EAAgB0D,GAChB,EAYsBE,CAAoBH,IAAuB,CAAAtB,SAEjEF,EAAC4B,EAA4BrB,OAAAC,OAAA,CAC5BtC,OAAQA,EACRwC,MAAOnC,EACPsD,QAASlD,EACTN,SAAUA,GAAQ,CAAA6B,SAAA,CAElBC,EAAK,MAAAI,OAAAC,OAAA,CAAAH,UAAU,oBAAkB,CAAAH,SAC/BnB,EACAiB,EAAA8B,EAAA,CAAA5B,SAAA,EACG5B,GAAiBU,GAClBmB,EACC,MAAA,CAAAC,IAAKpB,EACLqB,UAAU,eACVC,IAAKvB,EAAec,OAGtBM,EAACM,EAAaF,OAAAC,OAAA,CAACE,MAAOhC,aACpBK,EAAec,WAIlBM,EAACM,EACAF,OAAAC,OAAA,CAAAE,qBACCC,MAAOC,EAAOC,KAAKxC,UAChBK,IAAgB,CAAAwB,SAGnB1B,QAIJ2B,EAAC4B,EAAQ,CACRX,MAAO,GACPlD,OAAQ,GACRyC,MAAOtC,EAAWuC,EAAOC,KAAKxC,SAAWuC,EAAOoB,QAAQlB,gBAGzC"}

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

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