npm - @bikdotai/bik-component-library - Versions diffs - 0.0.817-beta.6 → 0.0.817-beta.8 - Mend

@bikdotai/bik-component-library 0.0.817-beta.6 → 0.0.817-beta.8

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

Files changed (1811) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0';\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","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxDEV","Fragment","this"],"mappings":"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"}
1	+ {"version":3,"file":"Button.styled.js","sources":["../../../../src/components/button/Button.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { Size, Type } from './model';\nimport {\n\tgenerateDisabledStyling,\n\tgenerateInverseHoverBackground,\n\tgetBackgroundColor,\n\tgetBorder,\n\tgetClickEffect,\n\tgetColor,\n\tgetDashedBorderStyling,\n\tgetDisabledTextColor,\n\tgetHoverButtonBackground,\n\tgetHoverButtonBackgroundCustom,\n\tgetHoverButtonTextDecorationStyle,\n\tgetLoadingBackground,\n\tgetLoadingBorder,\n\tgetLoadingButtonBackgroundCustom,\n\tgetPadding,\n} from './themes';\n\nexport const Button = styled.button<{\n\tsize: Size;\n\tbuttonType: Type;\n\tisLoading?: boolean;\n\tinverse?: boolean;\n\tdisabled?: boolean;\n\tmatchParentWidth?: boolean;\n\tversion?: '1.0' \| '2.0';\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","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingButtonBackgroundCustom","getLoadingBackground","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxDEV","Fragment","this"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),c=require("react"),d=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),s=require("./ButtonGroupStyle.js"),l=e=>{const[i,r]=c.useState(void 0);c.useEffect(()=>{r(e.activeButtonId||void 0)},[e?.activeButtonId]);const a=o=>{r(o.id),e.onButtonClick(o.id)};return t.jsxDEV(s.ButtonGroupStyle,{className:"button-group",width:e.width||"100%",gap:e.gap,size:e.size,iconPosition:e.iconPosition,children:e.buttonGroup.map(o=>{const u=o?.icon;return t.jsxDEV(s.Button,{borderRadius:e.borderRadius??"4px",matchParentWidth:e.matchParentWidth??!0,className:"button",isActive:i===o.id,onClick:()=>a(o),iconPosition:e.iconPosition,size:e.size,backgroundColor:e.backgroundColor||n.COLORS.surface.subdued,children:[e?.iconPosition&&u&&t.jsxDEV("div",{className:"button__image",children:t.jsxDEV(u,{color:i===o.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary,width:e?.iconWidth||"18px",height:e?.iconHeight||"18px"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:64,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:63,columnNumber:8},void 0),t.jsxDEV("div",{className:"button__name",children:t.jsxDEV(d.BodySecondary,{style:{color:i===o.id?n.COLORS.background.inverseLight:n.COLORS.content.secondary},children:o.title},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:76,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:75,columnNumber:7},void 0)]},o.id,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:51,columnNumber:6},void 0)})},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:41,columnNumber:3},void 0)};exports.ButtonGroup=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),s=require("react"),d=require("../TypographyStyle.js"),t=require("../../constants/Theme.js"),c=require("./ButtonGroupStyle.js"),l=e=>{const[i,r]=s.useState(void 0);s.useEffect(()=>{r(e.activeButtonId||void 0)},[e?.activeButtonId]);const a=o=>{r(o.id),e.onButtonClick(o.id)};return n.jsxDEV(c.ButtonGroupStyle,{className:"button-group",width:e.width||"100%",gap:e.gap,size:e.size,iconPosition:e.iconPosition,children:e.buttonGroup.map(o=>{const u=o?.icon;return n.jsxDEV(c.Button,{borderRadius:e.borderRadius??"4px",matchParentWidth:e.matchParentWidth??!0,className:"button",isActive:i===o.id,onClick:()=>a(o),iconPosition:e.iconPosition,size:e.size,backgroundColor:e.backgroundColor||t.COLORS.surface.subdued,children:[e?.iconPosition&&u&&n.jsxDEV("div",{className:"button__image",children:n.jsxDEV(u,{color:i===o.id?t.COLORS.background.inverseLight:t.COLORS.content.secondary,width:e?.iconWidth||"18px",height:e?.iconHeight||"18px"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:64,columnNumber:9},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:63,columnNumber:8},void 0),n.jsxDEV("div",{className:"button__name",children:n.jsxDEV(d.BodySecondary,{style:{color:i===o.id?t.COLORS.background.inverseLight:t.COLORS.content.secondary},children:o.title},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:76,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:75,columnNumber:7},void 0)]},o.id,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:51,columnNumber:6},void 0)})},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/buttonGroup/ButtonGroup.tsx",lineNumber:41,columnNumber:3},void 0)};exports.ButtonGroup=l;
 //# sourceMappingURL=ButtonGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/buttonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button, ButtonGroupStyle } from './ButtonGroupStyle';\n\nexport interface ButtonGroupInterface {\n\tid: string;\n\ttitle: string;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nexport interface ButtonGroupProps {\n\tid?: string;\n\twidth?: string;\n\tgap?: string;\n\ticonWidth?: string;\n\ticonHeight?: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tonButtonClick: (buttonId: string) => void;\n\tactiveButtonId?: string;\n\tbuttonGroup: Array<ButtonGroupInterface>;\n\tsize: 'small' \| 'medium' \| 'large';\n\tmatchParentWidth?: boolean;\n\tborderRadius?: string;\n\tbackgroundColor?: string;\n}\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {\n\tconst [activeTab, setActiveTab] = useState<string \| undefined>(undefined);\n\n\tuseEffect(() => {\n\t\tsetActiveTab(props.activeButtonId \|\| undefined);\n\t}, [props?.activeButtonId]);\n\n\tconst onButtonClicked = (button: ButtonGroupInterface) => {\n\t\tsetActiveTab(button.id);\n\t\tprops.onButtonClick(button.id);\n\t};\n\n\treturn (\n\t\t<ButtonGroupStyle\n\t\t\tclassName=\"button-group\"\n\t\t\twidth={props.width \|\| '100%'}\n\t\t\tgap={props.gap}\n\t\t\tsize={props.size}\n\t\t\ticonPosition={props.iconPosition}\n\t\t>\n\t\t\t{props.buttonGroup.map((button) => {\n\t\t\t\tconst IconToRender = button?.icon;\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tborderRadius={props.borderRadius ?? '4px'}\n\t\t\t\t\t\tmatchParentWidth={props.matchParentWidth ?? true}\n\t\t\t\t\t\tkey={button.id}\n\t\t\t\t\t\tclassName=\"button\"\n\t\t\t\t\t\tisActive={activeTab === button.id}\n\t\t\t\t\t\tonClick={() => onButtonClicked(button)}\n\t\t\t\t\t\ticonPosition={props.iconPosition}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tbackgroundColor={props.backgroundColor \|\| COLORS.surface.subdued}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props?.iconPosition && IconToRender && (\n\t\t\t\t\t\t\t<div className=\"button__image\">\n\t\t\t\t\t\t\t\t<IconToRender\n\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\tactiveTab === button.id\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\twidth={props?.iconWidth \|\| '18px'}\n\t\t\t\t\t\t\t\t\theight={props?.iconHeight \|\| '18px'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"button__name\">\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:\n\t\t\t\t\t\t\t\t\t\tactiveTab === button.id\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{button.title}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ButtonGroupStyle>\n\t);\n};\n"],"names":["ButtonGroup","props","activeTab","setActiveTab","useState","useEffect","onButtonClicked","button","jsxDEV","ButtonGroupStyle","IconToRender","Button","COLORS","this","BodySecondary"],"mappings":"wPA2BaA,EAA2CC,GAAU,CACjE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAA6B,MAAS,EAExEC,EAAAA,UAAU,IAAM,CACfF,EAAaF,EAAM,gBAAkB,MAAS,CAC/C,EAAG,CAACA,GAAO,cAAc,CAAC,EAE1B,MAAMK,EAAmBC,GAAiC,CACzDJ,EAAaI,EAAO,EAAE,EACtBN,EAAM,cAAcM,EAAO,EAAE,CAC9B,EAEA,OACCC,EAAAA,OAACC,EAAAA,iBAAA,CACA,UAAU,eACV,MAAOR,EAAM,OAAS,OACtB,IAAKA,EAAM,IACX,KAAMA,EAAM,KACZ,aAAcA,EAAM,aAEnB,SAAAA,EAAM,YAAY,IAAKM,GAAW,CAClC,MAAMG,EAAeH,GAAQ,KAC7B,OACCC,EAAAA,OAACG,EAAAA,OAAA,CACA,aAAcV,EAAM,cAAgB,MACpC,iBAAkBA,EAAM,kBAAoB,GAE5C,UAAU,SACV,SAAUC,IAAcK,EAAO,GAC/B,QAAS,IAAMD,EAAgBC,CAAM,EACrC,aAAcN,EAAM,aACpB,KAAMA,EAAM,KACZ,gBAAiBA,EAAM,iBAAmBW,EAAAA,OAAO,QAAQ,QAExD,SAAA,CAAAX,GAAO,cAAgBS,GACvBF,EAAAA,OAAC,MAAA,CAAI,UAAU,gBACd,SAAAA,EAAAA,OAACE,EAAA,CACA,MACCR,IAAcK,EAAO,GAClBK,EAAAA,OAAO,WAAW,aAClBA,SAAO,QAAQ,UAEnB,MAAOX,GAAO,WAAa,OAC3B,OAAQA,GAAO,YAAc,MAAA,EAP9B,OAAA,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EATD,OAAA,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAUA,EAEDL,EAAAA,OAAC,MAAA,CAAI,UAAU,eACd,SAAAA,EAAAA,OAACM,EAAAA,cAAA,CACA,MAAO,CACN,MACCZ,IAAcK,EAAO,GAClBK,EAAAA,OAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAA,EAGnB,SAAAL,EAAO,KAAA,EART,OAAA,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,CASA,EAVD,OAAA,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAWA,CAAA,CAAA,EAhCKN,EAAO,GAHb,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,CAsCF,CAAC,CAAA,EAhDF,OAAA,GAAA,CAAA,SAAA,~~kGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAmDF"}
1	+ {"version":3,"file":"ButtonGroup.js","sources":["../../../../src/components/buttonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport { BodySecondary } from '@src/components/TypographyStyle';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button, ButtonGroupStyle } from './ButtonGroupStyle';\n\nexport interface ButtonGroupInterface {\n\tid: string;\n\ttitle: string;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n}\n\nexport interface ButtonGroupProps {\n\tid?: string;\n\twidth?: string;\n\tgap?: string;\n\ticonWidth?: string;\n\ticonHeight?: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tonButtonClick: (buttonId: string) => void;\n\tactiveButtonId?: string;\n\tbuttonGroup: Array<ButtonGroupInterface>;\n\tsize: 'small' \| 'medium' \| 'large';\n\tmatchParentWidth?: boolean;\n\tborderRadius?: string;\n\tbackgroundColor?: string;\n}\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {\n\tconst [activeTab, setActiveTab] = useState<string \| undefined>(undefined);\n\n\tuseEffect(() => {\n\t\tsetActiveTab(props.activeButtonId \|\| undefined);\n\t}, [props?.activeButtonId]);\n\n\tconst onButtonClicked = (button: ButtonGroupInterface) => {\n\t\tsetActiveTab(button.id);\n\t\tprops.onButtonClick(button.id);\n\t};\n\n\treturn (\n\t\t<ButtonGroupStyle\n\t\t\tclassName=\"button-group\"\n\t\t\twidth={props.width \|\| '100%'}\n\t\t\tgap={props.gap}\n\t\t\tsize={props.size}\n\t\t\ticonPosition={props.iconPosition}\n\t\t>\n\t\t\t{props.buttonGroup.map((button) => {\n\t\t\t\tconst IconToRender = button?.icon;\n\t\t\t\treturn (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tborderRadius={props.borderRadius ?? '4px'}\n\t\t\t\t\t\tmatchParentWidth={props.matchParentWidth ?? true}\n\t\t\t\t\t\tkey={button.id}\n\t\t\t\t\t\tclassName=\"button\"\n\t\t\t\t\t\tisActive={activeTab === button.id}\n\t\t\t\t\t\tonClick={() => onButtonClicked(button)}\n\t\t\t\t\t\ticonPosition={props.iconPosition}\n\t\t\t\t\t\tsize={props.size}\n\t\t\t\t\t\tbackgroundColor={props.backgroundColor \|\| COLORS.surface.subdued}\n\t\t\t\t\t>\n\t\t\t\t\t\t{props?.iconPosition && IconToRender && (\n\t\t\t\t\t\t\t<div className=\"button__image\">\n\t\t\t\t\t\t\t\t<IconToRender\n\t\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\t\tactiveTab === button.id\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\twidth={props?.iconWidth \|\| '18px'}\n\t\t\t\t\t\t\t\t\theight={props?.iconHeight \|\| '18px'}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"button__name\">\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:\n\t\t\t\t\t\t\t\t\t\tactiveTab === button.id\n\t\t\t\t\t\t\t\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{button.title}\n\t\t\t\t\t\t\t</BodySecondary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Button>\n\t\t\t\t);\n\t\t\t})}\n\t\t</ButtonGroupStyle>\n\t);\n};\n"],"names":["ButtonGroup","props","activeTab","setActiveTab","useState","useEffect","onButtonClicked","button","jsxDEV","ButtonGroupStyle","IconToRender","Button","COLORS","this","BodySecondary"],"mappings":"wPA2BaA,EAA2CC,GAAU,CACjE,KAAM,CAACC,EAAWC,CAAY,EAAIC,EAAAA,SAA6B,MAAS,EAExEC,EAAAA,UAAU,IAAM,CACfF,EAAaF,EAAM,gBAAkB,MAAS,CAC/C,EAAG,CAACA,GAAO,cAAc,CAAC,EAE1B,MAAMK,EAAmBC,GAAiC,CACzDJ,EAAaI,EAAO,EAAE,EACtBN,EAAM,cAAcM,EAAO,EAAE,CAC9B,EAEA,OACCC,EAAAA,OAACC,EAAAA,iBAAA,CACA,UAAU,eACV,MAAOR,EAAM,OAAS,OACtB,IAAKA,EAAM,IACX,KAAMA,EAAM,KACZ,aAAcA,EAAM,aAEnB,SAAAA,EAAM,YAAY,IAAKM,GAAW,CAClC,MAAMG,EAAeH,GAAQ,KAC7B,OACCC,EAAAA,OAACG,EAAAA,OAAA,CACA,aAAcV,EAAM,cAAgB,MACpC,iBAAkBA,EAAM,kBAAoB,GAE5C,UAAU,SACV,SAAUC,IAAcK,EAAO,GAC/B,QAAS,IAAMD,EAAgBC,CAAM,EACrC,aAAcN,EAAM,aACpB,KAAMA,EAAM,KACZ,gBAAiBA,EAAM,iBAAmBW,EAAAA,OAAO,QAAQ,QAExD,SAAA,CAAAX,GAAO,cAAgBS,GACvBF,EAAAA,OAAC,MAAA,CAAI,UAAU,gBACd,SAAAA,EAAAA,OAACE,EAAA,CACA,MACCR,IAAcK,EAAO,GAClBK,EAAAA,OAAO,WAAW,aAClBA,SAAO,QAAQ,UAEnB,MAAOX,GAAO,WAAa,OAC3B,OAAQA,GAAO,YAAc,MAAA,EAP9B,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAY,MAAA,CAQA,EATD,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAUA,EAEDL,EAAAA,OAAC,MAAA,CAAI,UAAU,eACd,SAAAA,EAAAA,OAACM,EAAAA,cAAA,CACA,MAAO,CACN,MACCZ,IAAcK,EAAO,GAClBK,EAAAA,OAAO,WAAW,aAClBA,EAAAA,OAAO,QAAQ,SAAA,EAGnB,SAAAL,EAAO,KAAA,EART,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,CASA,EAVD,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAWA,CAAA,CAAA,EAhCKN,EAAO,GAHb,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAAA,CAsCF,CAAC,CAAA,EAhDF,OAAA,GAAA,CAAA,SAAA,iGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAmDF"}

package/dist/cjs/components/card-selection-modal/CardSelectionModal.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),t=require("../../assets/icons/info.svg.js"),l=require("./CardSelectionModal.styled.js"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),a=require("../modals/styledModal.js"),s=n=>{const c=()=>n.cards.map(o=>e.jsxDEV(l.StyledCard,{onClick:()=>{n.onCardSelected(o.value)},children:[o.icon&&e.jsxDEV("div",{className:"icon__container",children:e.jsxDEV(o.icon,{width:22,color:i.DEFAULT_THEME.colorsV2.content.brand},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:42,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:41,columnNumber:7},void 0),e.jsxDEV(r.TitleRegular,{children:o.title},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:48,columnNumber:6},void 0),e.jsxDEV(r.BodyCaption,{children:o.description},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:49,columnNumber:6},void 0)]},o.value,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:34,columnNumber:5},void 0));return e.jsxDEV(a.StyledModal,{open:n.isOpen,onClose:n.onClose,headingTitle:n.title,headingSubtitle:n.subTitle,centralContainerStyles:{width:716},children:e.jsxDEV(l.StyledCardContainer,{children:[e.jsxDEV("div",{className:"cards__wrapper",children:c()},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:64,columnNumber:5},void 0),n.infoText&&e.jsxDEV("div",{className:"info__wrapper",children:[e.jsxDEV(t.default,{width:15,color:i.DEFAULT_THEME.colorsV2.content.placeholder},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:67,columnNumber:7},void 0),e.jsxDEV(r.BodySecondary,{children:n.infoText},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:71,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:66,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:63,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:56,columnNumber:3},void 0)};exports.CardSelectionModal=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),d=require("../../assets/icons/info.svg.js"),r=require("./CardSelectionModal.styled.js"),i=require("../../constants/Theme.js"),l=require("../TypographyStyle.js"),s=require("../modals/styledModal.js"),c=n=>{const a=()=>n.cards.map(o=>e.jsxDEV(r.StyledCard,{onClick:()=>{n.onCardSelected(o.value)},children:[o.icon&&e.jsxDEV("div",{className:"icon__container",children:e.jsxDEV(o.icon,{width:22,color:i.DEFAULT_THEME.colorsV2.content.brand},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:42,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:41,columnNumber:7},void 0),e.jsxDEV(l.TitleRegular,{children:o.title},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:48,columnNumber:6},void 0),e.jsxDEV(l.BodyCaption,{children:o.description},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:49,columnNumber:6},void 0)]},o.value,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:34,columnNumber:5},void 0));return e.jsxDEV(s.StyledModal,{open:n.isOpen,onClose:n.onClose,headingTitle:n.title,headingSubtitle:n.subTitle,centralContainerStyles:{width:716},children:e.jsxDEV(r.StyledCardContainer,{children:[e.jsxDEV("div",{className:"cards__wrapper",children:a()},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:64,columnNumber:5},void 0),n.infoText&&e.jsxDEV("div",{className:"info__wrapper",children:[e.jsxDEV(d.default,{width:15,color:i.DEFAULT_THEME.colorsV2.content.placeholder},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:67,columnNumber:7},void 0),e.jsxDEV(l.BodySecondary,{children:n.infoText},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:71,columnNumber:7},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:66,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:63,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selection-modal/CardSelectionModal.tsx",lineNumber:56,columnNumber:3},void 0)};exports.CardSelectionModal=c;
 //# sourceMappingURL=CardSelectionModal.js.map

package/dist/cjs/components/card-selection-modal/CardSelectionModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelectionModal.js","sources":["../../../../src/components/card-selection-modal/CardSelectionModal.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport {\n\tStyledCard,\n\tStyledCardContainer,\n} from '@src/components/card-selection-modal/CardSelectionModal.styled';\nimport { StyledModal } from '@src/components/modals';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary, TitleRegular } from '../TypographyStyle';\n\nexport type CardSelectionModalProps = {\n\tisOpen: boolean;\n\ttitle?: string;\n\tsubTitle?: string;\n\tinfoText?: string;\n\tcards: SelectionCardData[];\n\tonCardSelected: (value: string) => void;\n\tonClose: () => void;\n};\n\nexport type SelectionCardData = {\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tvalue: string;\n\ttitle: string;\n\tdescription: string;\n};\n\nexport const CardSelectionModal: React.FC<CardSelectionModalProps> = (\n\tprops,\n) => {\n\tconst renderCards = () => {\n\t\treturn props.cards.map((card) => {\n\t\t\treturn (\n\t\t\t\t<StyledCard\n\t\t\t\t\tkey={card.value}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tprops.onCardSelected(card.value);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{card.icon && (\n\t\t\t\t\t\t<div className=\"icon__container\">\n\t\t\t\t\t\t\t<card.icon\n\t\t\t\t\t\t\t\twidth={22}\n\t\t\t\t\t\t\t\tcolor={DEFAULT_THEME.colorsV2.content.brand}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleRegular>{card.title}</TitleRegular>\n\t\t\t\t\t<BodyCaption>{card.description}</BodyCaption>\n\t\t\t\t</StyledCard>\n\t\t\t);\n\t\t});\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={props.isOpen}\n\t\t\tonClose={props.onClose}\n\t\t\theadingTitle={props.title}\n\t\t\theadingSubtitle={props.subTitle}\n\t\t\tcentralContainerStyles={{ width: 716 }}\n\t\t>\n\t\t\t<StyledCardContainer>\n\t\t\t\t<div className=\"cards__wrapper\">{renderCards()}</div>\n\t\t\t\t{props.infoText && (\n\t\t\t\t\t<div className=\"info__wrapper\">\n\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\twidth={15}\n\t\t\t\t\t\t\tcolor={DEFAULT_THEME.colorsV2.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BodySecondary>{props.infoText}</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</StyledCardContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["CardSelectionModal","props","renderCards","card","jsxDEV","StyledCard","DEFAULT_THEME","this","TitleRegular","BodyCaption","StyledModal","StyledCardContainer","InfoIcon","BodySecondary"],"mappings":"gUA2BaA,EACZC,GACI,CACJ,MAAMC,EAAc,IACZD,EAAM,MAAM,IAAKE,GAEtBC,EAAAA,OAACC,EAAAA,WAAA,CAEA,QAAS,IAAM,CACdJ,EAAM,eAAeE,EAAK,KAAK,CAChC,EAEC,SAAA,CAAAA,EAAK,MACLC,SAAC,MAAA,CAAI,UAAU,kBACd,SAAAA,EAAAA,OAACD,EAAK,KAAL,CACA,MAAO,GACP,MAAOG,EAAAA,cAAc,SAAS,QAAQ,KAAA,EAFvC,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAA,CAGA,EAJD,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAKA,EAEDH,EAAAA,OAACI,EAAAA,aAAA,CAAc,SAAAL,EAAK,KAAA,EAApB,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAI,MAA0B,EAC1BH,EAAAA,OAACK,EAAAA,YAAA,CAAa,SAAAN,EAAK,WAAA,EAAnB,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAI,MAA+B,CAAA,CAAA,EAd1BJ,EAAK,MADX,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,CAkBD,EAGF,OACCH,EAAAA,OAACM,EAAAA,YAAA,CACA,KAAMT,EAAM,OACZ,QAASA,EAAM,QACf,aAAcA,EAAM,MACpB,gBAAiBA,EAAM,SACvB,uBAAwB,CAAE,MAAO,GAAA,EAEjC,kBAACU,sBAAA,CACA,SAAA,CAAAP,SAAC,MAAA,CAAI,UAAU,iBAAkB,SAAAF,EAAA,CAAY,EAA7C,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAK,MAA+C,EAC9CN,EAAM,UACNG,SAAC,MAAA,CAAI,UAAU,gBACd,SAAA,CAAAA,EAAAA,OAACQ,EAAAA,QAAA,CACA,MAAO,GACP,MAAON,EAAAA,cAAc,SAAS,QAAQ,WAAA,EAFvC,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAA,EAIAH,EAAAA,OAACS,EAAAA,cAAA,CAAe,SAAAZ,EAAM,QAAA,EAAtB,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAM,MAA+B,CAAA,CAAA,EALhC,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAMA,CAAA,CAAA,EATF,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAWA,CAAA,EAlBD,OAAA,GAAA,CAAA,SAAA,~~kHAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAqBF"}
1	+ {"version":3,"file":"CardSelectionModal.js","sources":["../../../../src/components/card-selection-modal/CardSelectionModal.tsx"],"sourcesContent":["import InfoIcon from '@src/assets/icons/info.svg';\nimport React from 'react';\nimport {\n\tStyledCard,\n\tStyledCardContainer,\n} from '@src/components/card-selection-modal/CardSelectionModal.styled';\nimport { StyledModal } from '@src/components/modals';\nimport { DEFAULT_THEME } from '@src/constants/Theme';\nimport { BodyCaption, BodySecondary, TitleRegular } from '../TypographyStyle';\n\nexport type CardSelectionModalProps = {\n\tisOpen: boolean;\n\ttitle?: string;\n\tsubTitle?: string;\n\tinfoText?: string;\n\tcards: SelectionCardData[];\n\tonCardSelected: (value: string) => void;\n\tonClose: () => void;\n};\n\nexport type SelectionCardData = {\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\tvalue: string;\n\ttitle: string;\n\tdescription: string;\n};\n\nexport const CardSelectionModal: React.FC<CardSelectionModalProps> = (\n\tprops,\n) => {\n\tconst renderCards = () => {\n\t\treturn props.cards.map((card) => {\n\t\t\treturn (\n\t\t\t\t<StyledCard\n\t\t\t\t\tkey={card.value}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tprops.onCardSelected(card.value);\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{card.icon && (\n\t\t\t\t\t\t<div className=\"icon__container\">\n\t\t\t\t\t\t\t<card.icon\n\t\t\t\t\t\t\t\twidth={22}\n\t\t\t\t\t\t\t\tcolor={DEFAULT_THEME.colorsV2.content.brand}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<TitleRegular>{card.title}</TitleRegular>\n\t\t\t\t\t<BodyCaption>{card.description}</BodyCaption>\n\t\t\t\t</StyledCard>\n\t\t\t);\n\t\t});\n\t};\n\n\treturn (\n\t\t<StyledModal\n\t\t\topen={props.isOpen}\n\t\t\tonClose={props.onClose}\n\t\t\theadingTitle={props.title}\n\t\t\theadingSubtitle={props.subTitle}\n\t\t\tcentralContainerStyles={{ width: 716 }}\n\t\t>\n\t\t\t<StyledCardContainer>\n\t\t\t\t<div className=\"cards__wrapper\">{renderCards()}</div>\n\t\t\t\t{props.infoText && (\n\t\t\t\t\t<div className=\"info__wrapper\">\n\t\t\t\t\t\t<InfoIcon\n\t\t\t\t\t\t\twidth={15}\n\t\t\t\t\t\t\tcolor={DEFAULT_THEME.colorsV2.content.placeholder}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BodySecondary>{props.infoText}</BodySecondary>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</StyledCardContainer>\n\t\t</StyledModal>\n\t);\n};\n"],"names":["CardSelectionModal","props","renderCards","card","jsxDEV","StyledCard","DEFAULT_THEME","this","TitleRegular","BodyCaption","StyledModal","StyledCardContainer","InfoIcon","BodySecondary"],"mappings":"gUA2BaA,EACZC,GACI,CACJ,MAAMC,EAAc,IACZD,EAAM,MAAM,IAAKE,GAEtBC,EAAAA,OAACC,EAAAA,WAAA,CAEA,QAAS,IAAM,CACdJ,EAAM,eAAeE,EAAK,KAAK,CAChC,EAEC,SAAA,CAAAA,EAAK,MACLC,SAAC,MAAA,CAAI,UAAU,kBACd,SAAAA,EAAAA,OAACD,EAAK,KAAL,CACA,MAAO,GACP,MAAOG,EAAAA,cAAc,SAAS,QAAQ,KAAA,EAFvC,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAA,CAGA,EAJD,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAKA,EAEDH,EAAAA,OAACI,EAAAA,aAAA,CAAc,SAAAL,EAAK,KAAA,EAApB,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAA0B,EAC1BH,EAAAA,OAACK,EAAAA,YAAA,CAAa,SAAAN,EAAK,WAAA,EAAnB,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAA+B,CAAA,CAAA,EAd1BJ,EAAK,MADX,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAI,MAAA,CAkBD,EAGF,OACCH,EAAAA,OAACM,EAAAA,YAAA,CACA,KAAMT,EAAM,OACZ,QAASA,EAAM,QACf,aAAcA,EAAM,MACpB,gBAAiBA,EAAM,SACvB,uBAAwB,CAAE,MAAO,GAAA,EAEjC,kBAACU,sBAAA,CACA,SAAA,CAAAP,SAAC,MAAA,CAAI,UAAU,iBAAkB,SAAAF,EAAA,CAAY,EAA7C,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAK,MAA+C,EAC9CN,EAAM,UACNG,SAAC,MAAA,CAAI,UAAU,gBACd,SAAA,CAAAA,EAAAA,OAACQ,EAAAA,QAAA,CACA,MAAO,GACP,MAAON,EAAAA,cAAc,SAAS,QAAQ,WAAA,EAFvC,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAA,EAIAH,EAAAA,OAACS,EAAAA,cAAA,CAAe,SAAAZ,EAAM,QAAA,EAAtB,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAM,MAA+B,CAAA,CAAA,EALhC,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAMA,CAAA,CAAA,EATF,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAWA,CAAA,EAlBD,OAAA,GAAA,CAAA,SAAA,iHAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAqBF"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-dev-runtime"),n=require("../../constants/Theme.js"),o=require("../spinner/Spinner.js"),c=require("../TypographyStyle.js"),r=require("./CardSelector.styled.js"),i=require("../tooltips/Tooltip.js"),a=e=>t.jsxDEV(t.Fragment,{children:e.tooltip?t.jsxDEV(i.Tooltip,{title:e.tooltip,children:t.jsxDEV(r.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsxDEV(l,{...e},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:44,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:29,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:28,columnNumber:5},void 0):t.jsxDEV(r.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:t.jsxDEV(l,{...e},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:62,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:48,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:26,columnNumber:3},void 0),l=e=>t.jsxDEV(t.Fragment,{children:e.loading?t.jsxDEV(r.Loader,{children:t.jsxDEV(o.Spinner,{size:"large"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:74,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:73,columnNumber:5},void 0):t.jsxDEV(t.Fragment,{children:[e?.icon&&t.jsxDEV("div",{style:{width:24,height:24},children:t.jsxDEV(e.icon,{width:24,color:e.selected?n.COLORS.content.brand:e.disabled?n.COLORS.content.inactive:n.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:80,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:79,columnNumber:7},void 0),t.jsxDEV("div",{"data-test":e?.dataTestId,children:[e.title&&t.jsxDEV(c.TitleSmall,{style:{color:e.selected?n.COLORS.content.brand:e.disabled?n.COLORS.content.inactive:n.COLORS.content.secondary},children:e.title},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:94,columnNumber:8},void 0),e.subtitle&&t.jsxDEV(c.BodyCaption,{style:{marginTop:e.title?4:0,color:e.selected?n.COLORS.content.brand:e.disabled?n.COLORS.content.inactive:n.COLORS.content.secondary},children:e.subtitle},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:107,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:92,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:77,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:71,columnNumber:3},void 0);exports.CardSelector=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-dev-runtime"),o=require("../../constants/Theme.js"),t=require("../spinner/Spinner.js"),r=require("../TypographyStyle.js"),l=require("./CardSelector.styled.js"),a=require("../tooltips/Tooltip.js"),d=e=>n.jsxDEV(n.Fragment,{children:e.tooltip?n.jsxDEV(a.Tooltip,{title:e.tooltip,children:n.jsxDEV(l.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:n.jsxDEV(i,{...e},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:44,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:29,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:28,columnNumber:5},void 0):n.jsxDEV(l.Container,{style:{alignItems:e.title&&e.subtitle?"flex-start":"center"},selected:e.selected,disabled:e.disabled??!1,loading:e.loading??!1,onClick:()=>{!e.disabled&&!e.loading&&e.onCardClick(e.id)},isTooltipPresent:!!e.tooltip,children:n.jsxDEV(i,{...e},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:62,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:48,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:26,columnNumber:3},void 0),i=e=>n.jsxDEV(n.Fragment,{children:e.loading?n.jsxDEV(l.Loader,{children:n.jsxDEV(t.Spinner,{size:"large"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:74,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:73,columnNumber:5},void 0):n.jsxDEV(n.Fragment,{children:[e?.icon&&n.jsxDEV("div",{style:{width:24,height:24},children:n.jsxDEV(e.icon,{width:24,color:e.selected?o.COLORS.content.brand:e.disabled?o.COLORS.content.inactive:o.COLORS.content.placeholder},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:80,columnNumber:8},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:79,columnNumber:7},void 0),n.jsxDEV("div",{"data-test":e?.dataTestId,children:[e.title&&n.jsxDEV(r.TitleSmall,{style:{color:e.selected?o.COLORS.content.brand:e.disabled?o.COLORS.content.inactive:o.COLORS.content.secondary},children:e.title},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:94,columnNumber:8},void 0),e.subtitle&&n.jsxDEV(r.BodyCaption,{style:{marginTop:e.title?4:0,color:e.selected?o.COLORS.content.brand:e.disabled?o.COLORS.content.inactive:o.COLORS.content.secondary},children:e.subtitle},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:107,columnNumber:8},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:92,columnNumber:6},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:77,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelector.tsx",lineNumber:71,columnNumber:3},void 0);exports.CardSelector=d;
 //# sourceMappingURL=CardSelector.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsxDEV","Container","EachSelector","this","Fragment","Loader","Spinner","COLORS","TitleSmall","BodyCaption"],"mappings":"+SAuBaA,EAAqDC,wBAG9D,SAAAA,EAAM,iBACLC,EAAAA,QAAA,CAAQ,MAAOD,EAAM,QACrB,SAAAE,EAAAA,OAACC,EAAAA,UAAA,CACA,MAAO,CACN,WACCH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAEjD,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,OAACE,EAAA,CAAc,GAAGJ,CAAA,EAAlB,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAK,MAAyB,CAAA,EAf1B,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAgBA,EAjBD,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAkBA,EAEAH,EAAAA,OAACC,EAAAA,UAAA,CACA,MAAO,CACN,WAAYH,EAAM,OAASA,EAAM,SAAW,aAAe,QAAA,EAE5D,SAAUA,EAAM,SAChB,SAAUA,EAAM,UAAY,GAC5B,QAASA,EAAM,SAAW,GAC1B,QAAS,IAAM,CACV,CAACA,EAAM,UAAY,CAACA,EAAM,SAC7BA,EAAM,YAAYA,EAAM,EAAE,CAE5B,EACA,iBAAkB,CAAC,CAACA,EAAM,QAE1B,SAAAE,EAAAA,OAACE,EAAA,CAAc,GAAGJ,CAAA,EAAlB,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAK,MAAyB,CAAA,EAd1B,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAeA,EArCF,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAuCA,EAIID,EAAqDJ,GAEzDE,EAAAA,OAAAI,EAAAA,SAAA,CACE,WAAM,QACNJ,EAAAA,OAACK,EAAAA,QACA,SAAAL,EAAAA,OAACM,EAAAA,QAAA,CAAQ,KAAM,OAAA,EAAf,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAH,MAAwB,CAAA,EADzB,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAEAH,EAAAA,OAAAI,EAAAA,SAAA,CACE,SAAA,CAAAN,GAAO,eACN,MAAA,CAAI,MAAO,CAAE,MAAO,GAAI,OAAQ,EAAA,EAChC,SAAAE,EAAAA,OAACF,EAAM,KAAN,CACA,MAAO,GACP,MACCA,EAAM,SACHS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,WAAA,EAPpB,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CASA,EAVD,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAWA,EAEDH,EAAAA,OAAC,MAAA,CAAI,YAAWF,GAAO,WACrB,SAAA,CAAAA,EAAM,OACNE,EAAAA,OAACQ,EAAAA,WAAA,CACA,MAAO,CACN,MAAOV,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,KAAA,EATR,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAK,MAAA,EAYAL,EAAM,UACNE,EAAAA,OAACS,EAAAA,YAAA,CACA,MAAO,CACN,UAAWX,EAAM,MAAQ,EAAI,EAC7B,MAAOA,EAAM,SACVS,EAAAA,OAAO,QAAQ,MACfT,EAAM,SACNS,EAAAA,OAAO,QAAQ,SACfA,EAAAA,OAAO,QAAQ,SAAA,EAGlB,SAAAT,EAAM,QAAA,EAVR,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAK,MAAA,CAWA,CAAA,EA1BF,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MA4BA,CAAA,CAAA,EA3CD,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MA4CA,CAAA,EAlDF,OAAA,GAAA,CAAA,SAAA,~~qGAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAoDA"}
1	+ {"version":3,"file":"CardSelector.js","sources":["../../../../src/components/card-selector/CardSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Spinner } from '../spinner/Spinner';\nimport { Tooltip } from '../tooltips';\nimport { BodyCaption, TitleSmall } from '../TypographyStyle';\nimport { Container, Loader } from './CardSelector.styled';\n\nexport type CardSelectorProps = {\n\tid: number;\n\ticon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;\n\ttitle?: string;\n\tsubtitle?: string;\n\tselected: boolean;\n\tloading?: boolean;\n\tdisabled?: boolean;\n\tdataTestId?: string;\n\ttooltip?: string;\n};\n\ntype CardSelectorInternalProps = CardSelectorProps & {\n\tonCardClick: (id: number) => void;\n};\n\nexport const CardSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.tooltip ? (\n\t\t\t\t<Tooltip title={props.tooltip}>\n\t\t\t\t\t<Container\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\talignItems:\n\t\t\t\t\t\t\t\tprops.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tselected={props.selected}\n\t\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t\t>\n\t\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t\t</Container>\n\t\t\t\t</Tooltip>\n\t\t\t) : (\n\t\t\t\t<Container\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\talignItems: props.title && props.subtitle ? 'flex-start' : 'center',\n\t\t\t\t\t}}\n\t\t\t\t\tselected={props.selected}\n\t\t\t\t\tdisabled={props.disabled ?? false}\n\t\t\t\t\tloading={props.loading ?? false}\n\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\tif (!props.disabled && !props.loading) {\n\t\t\t\t\t\t\tprops.onCardClick(props.id);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}\n\t\t\t\t\tisTooltipPresent={!!props.tooltip}\n\t\t\t\t>\n\t\t\t\t\t<EachSelector {...props} />\n\t\t\t\t</Container>\n\t\t\t)}\n\t\t</>\n\t);\n};\n\nconst EachSelector: React.FC<CardSelectorInternalProps> = (props) => {\n\treturn (\n\t\t<>\n\t\t\t{props.loading ? (\n\t\t\t\t<Loader>\n\t\t\t\t\t<Spinner size={'large'} />\n\t\t\t\t</Loader>\n\t\t\t) : (\n\t\t\t\t<>\n\t\t\t\t\t{props?.icon && (\n\t\t\t\t\t\t<div style={{ width: 24, height: 24 }}>\n\t\t\t\t\t\t\t<props.icon\n\t\t\t\t\t\t\t\twidth={24}\n\t\t\t\t\t\t\t\tcolor={\n\t\t\t\t\t\t\t\t\tprops.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.placeholder\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div data-test={props?.dataTestId}>\n\t\t\t\t\t\t{props.title && (\n\t\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{props.title}\n\t\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{props.subtitle && (\n\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\tmarginTop: props.title ? 4 : 0,\n\t\t\t\t\t\t\t\t\tcolor: props.selected\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.brand\n\t\t\t\t\t\t\t\t\t\t: props.disabled\n\t\t\t\t\t\t\t\t\t\t? COLORS.content.inactive\n\t\t\t\t\t\t\t\t\t\t: COLORS.content.secondary,\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{props.subtitle}\n\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</>\n\t);\n};\n"],"names":["CardSelector","props","Tooltip","jsxDEV","Container","EachSelector","this","Fragment","Loader","Spinner","COLORS","TitleSmall","BodyCaption"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-dev-runtime"),o=require("./CardSelector.js"),r=t=>l.jsxDEV("div",{style:{display:"flex",flexDirection:t.align==="vertical"?"column":"row",gap:t.gap||16},children:t.cards.map(e=>l.jsxDEV("div",{style:{display:"flex",flex:1},children:l.jsxDEV(o.CardSelector,{"data-test":t["data-test"],id:e.id,icon:e.icon,title:e.title,subtitle:e.subtitle,selected:e.selected,onCardClick:t.onClick,loading:e.loading,disabled:e.disabled,dataTestId:e.dataTestId,tooltip:e.tooltip},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:23,columnNumber:6},void 0)},e.id,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:22,columnNumber:5},void 0))},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:14,columnNumber:3},void 0);exports.CardSelectorGroup=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-dev-runtime"),t=require("./CardSelector.js"),i=o=>l.jsxDEV("div",{style:{display:"flex",flexDirection:o.align==="vertical"?"column":"row",gap:o.gap||16},children:o.cards.map(e=>l.jsxDEV("div",{style:{display:"flex",flex:1},children:l.jsxDEV(t.CardSelector,{"data-test":o["data-test"],id:e.id,icon:e.icon,title:e.title,subtitle:e.subtitle,selected:e.selected,onCardClick:o.onClick,loading:e.loading,disabled:e.disabled,dataTestId:e.dataTestId,tooltip:e.tooltip},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:23,columnNumber:6},void 0)},e.id,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:22,columnNumber:5},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/card-selector/CardSelectorGroup.tsx",lineNumber:14,columnNumber:3},void 0);exports.CardSelectorGroup=i;
 //# sourceMappingURL=CardSelectorGroup.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsxDEV","card","CardSelector","this"],"mappings":"wJAWaA,EAAuDC,GAElEC,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAeD,EAAM,QAAU,WAAa,SAAW,MACvD,IAAKA,EAAM,KAAO,EAAA,EAGlB,SAAAA,EAAM,MAAM,IAAKE,GACjBD,EAAAA,OAAC,MAAA,CAAkB,MAAO,CAAE,QAAS,OAAQ,KAAM,GAClD,SAAAA,EAAAA,OAACE,EAAAA,aAAA,CACA,YAAWH,EAAM,WAAW,EAC5B,GAAIE,EAAK,GACT,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,SAAUA,EAAK,SACf,SAAUA,EAAK,SACf,YAAaF,EAAM,QACnB,QAASE,EAAK,QACd,SAAUA,EAAK,SACf,WAAYA,EAAK,WACjB,QAASA,EAAK,OAAA,EAXf,OAAA,GAAA,CAAA,SAAA,~~0GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAE,MAAA,GADSF,EAAK,GAAf,GAAA,CAAA,SAAA,~~0GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAE,MAcA,CACA,CAAA,EAvBF,OAAA,GAAA,CAAA,SAAA,~~0GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA"}
1	+ {"version":3,"file":"CardSelectorGroup.js","sources":["../../../../src/components/card-selector/CardSelectorGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { CardSelector, CardSelectorProps } from './CardSelector';\n\nexport type CardSelectorGroupProps = {\n\tgap?: number;\n\talign?: 'horizontal' \| 'vertical';\n\tcards: CardSelectorProps[];\n\tonClick: (id: number) => void;\n\t'data-test': string;\n};\n\nexport const CardSelectorGroup: React.FC<CardSelectorGroupProps> = (props) => {\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tflexDirection: props.align === 'vertical' ? 'column' : 'row',\n\t\t\t\tgap: props.gap \|\| 16,\n\t\t\t}}\n\t\t>\n\t\t\t{props.cards.map((card) => (\n\t\t\t\t<div key={card.id} style={{ display: 'flex', flex: 1 }}>\n\t\t\t\t\t<CardSelector\n\t\t\t\t\t\tdata-test={props['data-test']}\n\t\t\t\t\t\tid={card.id}\n\t\t\t\t\t\ticon={card.icon}\n\t\t\t\t\t\ttitle={card.title}\n\t\t\t\t\t\tsubtitle={card.subtitle}\n\t\t\t\t\t\tselected={card.selected}\n\t\t\t\t\t\tonCardClick={props.onClick}\n\t\t\t\t\t\tloading={card.loading}\n\t\t\t\t\t\tdisabled={card.disabled}\n\t\t\t\t\t\tdataTestId={card.dataTestId}\n\t\t\t\t\t\ttooltip={card.tooltip}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n};\n"],"names":["CardSelectorGroup","props","jsxDEV","card","CardSelector","this"],"mappings":"wJAWaA,EAAuDC,GAElEC,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,QAAS,OACT,cAAeD,EAAM,QAAU,WAAa,SAAW,MACvD,IAAKA,EAAM,KAAO,EAAA,EAGlB,SAAAA,EAAM,MAAM,IAAKE,GACjBD,EAAAA,OAAC,MAAA,CAAkB,MAAO,CAAE,QAAS,OAAQ,KAAM,GAClD,SAAAA,EAAAA,OAACE,EAAAA,aAAA,CACA,YAAWH,EAAM,WAAW,EAC5B,GAAIE,EAAK,GACT,KAAMA,EAAK,KACX,MAAOA,EAAK,MACZ,SAAUA,EAAK,SACf,SAAUA,EAAK,SACf,YAAaF,EAAM,QACnB,QAASE,EAAK,QACd,SAAUA,EAAK,SACf,WAAYA,EAAK,WACjB,QAASA,EAAK,OAAA,EAXf,OAAA,GAAA,CAAA,SAAA,yGAAA,WAAA,GAAA,aAAA,CAAA,EAAAE,MAAA,GADSF,EAAK,GAAf,GAAA,CAAA,SAAA,yGAAA,WAAA,GAAA,aAAA,CAAA,EAAAE,MAcA,CACA,CAAA,EAvBF,OAAA,GAAA,CAAA,SAAA,yGAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA"}

package/dist/cjs/components/carousel/carousel.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),s=require("../../assets/icons/chevronRight.svg.js"),t=require("@trendyol-js/react-carousel"),c=require("styled-components"),l=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=l(c),i=()=>e.jsxDEV(o,{className:"left",children:e.jsxDEV(n.default,{width:16,height:16,color:"#fff"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:10,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:9,columnNumber:3},void 0),u=()=>e.jsxDEV(o,{className:"right",children:e.jsxDEV(s.default,{width:16,height:16,color:"#fff"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:18,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:17,columnNumber:3},void 0),m=r=>e.jsxDEV(e.Fragment,{children:e.jsxDEV(t.Carousel,{leftArrow:e.jsxDEV(i,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:27,columnNumber:16},void 0),rightArrow:e.jsxDEV(u,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:28,columnNumber:17},void 0),...r,children:r.children},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:26,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:25,columnNumber:3},void 0),o=a.default.div`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-dev-runtime"),n=require("../../assets/icons/chevronLeft.svg.js"),s=require("../../assets/icons/chevronRight.svg.js"),l=require("@trendyol-js/react-carousel"),a=require("styled-components"),i=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},t=i(a),c=()=>e.jsxDEV(r,{className:"left",children:e.jsxDEV(n.default,{width:16,height:16,color:"#fff"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:10,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:9,columnNumber:3},void 0),u=()=>e.jsxDEV(r,{className:"right",children:e.jsxDEV(s.default,{width:16,height:16,color:"#fff"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:18,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:17,columnNumber:3},void 0),d=o=>e.jsxDEV(e.Fragment,{children:e.jsxDEV(l.Carousel,{leftArrow:e.jsxDEV(c,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:27,columnNumber:16},void 0),rightArrow:e.jsxDEV(u,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:28,columnNumber:17},void 0),...o,children:o.children},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:26,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel/carousel.tsx",lineNumber:25,columnNumber:3},void 0),r=t.default.div`
 	cursor: pointer;
 	margin: 0 8px;
 	width: 50px;
@@ -19,5 +19,5 @@
 		transform: translate(0%, -50%);
 		right: 0;
 	}
-`;exports.Carousel=m;
+`;exports.Carousel=d;
 //# sourceMappingURL=carousel.js.map

package/dist/cjs/components/carousel/carousel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsxDEV","ArrowContainer","ChevronLeft","this","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"uWAMMA,EAAY,IAEhBC,EAAAA,OAACC,EAAA,CAAe,UAAU,OACzB,SAAAD,EAAAA,OAACE,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,EAA1C,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAiD,CAAA,EADlD,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,EAAA,aAAA,CAAA,EAAAA,MAEA,EAIIC,EAAa,IAEjBJ,EAAAA,OAACC,EAAA,CAAe,UAAU,QACzB,SAAAD,EAAAA,OAACK,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,EAA3C,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAkD,CAAA,EADnD,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAIWG,EAAYC,GAEvBP,SAAAQ,EAAAA,SAAA,CACC,SAAAR,EAAAA,OAACS,EAAAA,SAAA,CACA,mBAAYV,EAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,EAAA,EAAAI,MAAW,EACtB,oBAAaC,EAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,EAAA,EAAAD,MAAY,EACvB,GAAGI,EAEH,SAAAA,EAAM,QAAA,EALR,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAMA,EAPD,OAAA,GAAA,CAAA,SAAA,~~4FAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAQA,EAIIF,EAAiBS,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}
1	+ {"version":3,"file":"carousel.js","sources":["../../../../src/components/carousel/carousel.tsx"],"sourcesContent":["import ChevronLeft from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRight from '@src/assets/icons/chevronRight.svg';\nimport { Carousel as ReactCarousel } from '@trendyol-js/react-carousel';\nimport { CarouselProps } from '@trendyol-js/react-carousel/dist/types/components/carousel';\nimport styled from 'styled-components';\n\nconst LeftArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"left\">\n\t\t\t<ChevronLeft width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nconst RightArrow = () => {\n\treturn (\n\t\t<ArrowContainer className=\"right\">\n\t\t\t<ChevronRight width={16} height={16} color=\"#fff\" />\n\t\t</ArrowContainer>\n\t);\n};\n\nexport const Carousel = (props: CarouselProps) => {\n\treturn (\n\t\t<>\n\t\t\t<ReactCarousel\n\t\t\t\tleftArrow={<LeftArrow />}\n\t\t\t\trightArrow={<RightArrow />}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{props.children}\n\t\t\t</ReactCarousel>\n\t\t</>\n\t);\n};\n\nconst ArrowContainer = styled.div`\n\tcursor: pointer;\n\tmargin: 0 8px;\n\twidth: 50px;\n\theight: 50px;\n\tborder-radius: 25px;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground-color: rgba(0, 0, 0, 0.4);\n\tjustify-content: center;\n\tposition: absolute;\n\tz-index: 2;\n\ttop: 50%;\n\t&.left {\n\t\ttransform: translate(0%, -50%);\n\t\tleft: 0;\n\t}\n\t&.right {\n\t\ttransform: translate(0%, -50%);\n\t\tright: 0;\n\t}\n`;\n"],"names":["LeftArrow","jsxDEV","ArrowContainer","ChevronLeft","this","RightArrow","ChevronRight","Carousel","props","Fragment","ReactCarousel","styled"],"mappings":"uWAMMA,EAAY,IAEhBC,EAAAA,OAACC,EAAA,CAAe,UAAU,OACzB,SAAAD,EAAAA,OAACE,EAAAA,QAAA,CAAY,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,EAA1C,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAiD,CAAA,EADlD,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,EAAA,aAAA,CAAA,EAAAA,MAEA,EAIIC,EAAa,IAEjBJ,EAAAA,OAACC,EAAA,CAAe,UAAU,QACzB,SAAAD,EAAAA,OAACK,EAAAA,QAAA,CAAa,MAAO,GAAI,OAAQ,GAAI,MAAM,MAAA,EAA3C,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,CAAA,EAAAF,MAAkD,CAAA,EADnD,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAEA,EAIWG,EAAYC,GAEvBP,SAAAQ,EAAAA,SAAA,CACC,SAAAR,EAAAA,OAACS,EAAAA,SAAA,CACA,mBAAYV,EAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,EAAA,EAAAI,MAAW,EACtB,oBAAaC,EAAA,CAAA,EAAD,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,EAAA,EAAAD,MAAY,EACvB,GAAGI,EAEH,SAAAA,EAAM,QAAA,EALR,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,CAAA,EAAAJ,MAAA,CAMA,EAPD,OAAA,GAAA,CAAA,SAAA,2FAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAQA,EAIIF,EAAiBS,EAAAA,QAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-dev-runtime"),j=require("../../assets/icons/aiContentIcon.svg.js"),k=require("react"),y=require("react-slick"),h=require("./CarouselPreview.style.js"),N=require("./CarouselPreviewCard.js"),D=require("../template-preview/TemplatePreview.styled.js"),S=require("../template-context-mapper/context/templateModalContext.js"),v=require("../template-preview/helpers/templateMiscHelper.js"),g=require("../template-preview/RCS/RCSPreview.styled.js"),w=require("./CustomCarouselArrows.js"),x=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},E=x(k),V=x(y),q=E.default.forwardRef(({channel:e,template:o,isPreview:a,removeBottomBorder:l,borderRadius:n,showArrows:c,hideBorder:d,showSampleValues:t})=>{const{sliderRef:i,selectedCarouselIndex:m,cardCount:u,setIsCarouselHovered:p,cardIndex:s,showVariablePicker:f}=S.useTemplateModalContext(),P=s==-1?v.determineCardIndex(e):s,b=o?.components?.[P]?.cards,C=b?.length?r.jsxDEV(U,{cards:b,cardCount:u??0,selectedCarouselIndex:m??-1,sliderRef:i,isPreview:a,showArrows:c,channel:e,template:o,setIsCarouselHovered:p,showSampleValues:!!t,showVariablePicker:f},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:69,columnNumber:4},void 0):null;return v.isRCSChannel(e)?r.jsxDEV(g.RCSCarousalContainer,{borderRadius:n,children:C},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:86,columnNumber:5},void 0):r.jsxDEV(h.Container,{removeBottomBorder:l,borderRadius:n,hideBorder:d,children:[(!!o?.aiContentConfigId||!!o?.isAiGenerated)&&r.jsxDEV(D.AiContentBadge,{children:r.jsxDEV(j.default,{width:48,height:48},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:101,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:100,columnNumber:6},void 0),r.jsxDEV(N.default,{channel:e,currentTemplate:o,carouselCardIndex:-1,isPreview:a,width:"77%"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:104,columnNumber:5},void 0),C]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:93,columnNumber:4},void 0)}),U=({cards:e,cardCount:o,selectedCarouselIndex:a,sliderRef:l,isPreview:n,showArrows:c,channel:d,template:t,setIsCarouselHovered:i,showSampleValues:m,showVariablePicker:u})=>r.jsxDEV(h.CarouselSlickContainer,{cardCount:o,selectedCarouselIndex:a,onMouseEnter:()=>!u&&i?.(!0),onMouseLeave:()=>!u&&i?.(!1),children:r.jsxDEV(V.default,{ref:l,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!n,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:r.jsxDEV(w.CustomCarouselRightArrow,{isPreview:n??!1},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:158,columnNumber:15},void 0),prevArrow:r.jsxDEV(w.CustomCarouselLeftArrow,{isPreview:n??!1},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:159,columnNumber:15},void 0),children:e?.map((p,s)=>{const f={components:p.components,mapping:t?.mapping?.cards?.[s],content:t?.content,templateType:t?.templateType};return r.jsxDEV(N.default,{channel:d,currentTemplate:f,carouselCardIndex:s,isPreview:n,width:"100%",showSampleValues:m},s,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:169,columnNumber:6},void 0)})},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:148,columnNumber:3},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:142,columnNumber:2},void 0);exports.CarouselPreview=q;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-dev-runtime"),P=require("../../assets/icons/aiContentIcon.svg.js"),j=require("react"),S=require("react-slick"),N=require("./CarouselPreview.style.js"),x=require("./CarouselPreviewCard.js"),g=require("../template-preview/TemplatePreview.styled.js"),h=require("../template-context-mapper/context/templateModalContext.js"),C=require("../template-preview/helpers/templateMiscHelper.js"),k=require("../template-preview/RCS/RCSPreview.styled.js"),v=require("./CustomCarouselArrows.js"),y=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},E=y(j),V=y(S),q=E.default.forwardRef(({channel:e,template:o,isPreview:i,removeBottomBorder:u,borderRadius:n,showArrows:c,hideBorder:d,showSampleValues:a})=>{const{sliderRef:l,selectedCarouselIndex:m,cardCount:t,setIsCarouselHovered:f,cardIndex:s,showVariablePicker:p}=h.useTemplateModalContext(),D=s==-1?C.determineCardIndex(e):s,w=o?.components?.[D]?.cards,b=w?.length?r.jsxDEV(U,{cards:w,cardCount:t??0,selectedCarouselIndex:m??-1,sliderRef:l,isPreview:i,showArrows:c,channel:e,template:o,setIsCarouselHovered:f,showSampleValues:!!a,showVariablePicker:p},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:69,columnNumber:4},void 0):null;return C.isRCSChannel(e)?r.jsxDEV(k.RCSCarousalContainer,{borderRadius:n,children:b},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:86,columnNumber:5},void 0):r.jsxDEV(N.Container,{removeBottomBorder:u,borderRadius:n,hideBorder:d,children:[(!!o?.aiContentConfigId||!!o?.isAiGenerated)&&r.jsxDEV(g.AiContentBadge,{children:r.jsxDEV(P.default,{width:48,height:48},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:101,columnNumber:7},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:100,columnNumber:6},void 0),r.jsxDEV(x.default,{channel:e,currentTemplate:o,carouselCardIndex:-1,isPreview:i,width:"77%"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:104,columnNumber:5},void 0),b]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:93,columnNumber:4},void 0)}),U=({cards:e,cardCount:o,selectedCarouselIndex:i,sliderRef:u,isPreview:n,showArrows:c,channel:d,template:a,setIsCarouselHovered:l,showSampleValues:m,showVariablePicker:t})=>r.jsxDEV(N.CarouselSlickContainer,{cardCount:o,selectedCarouselIndex:i,onMouseEnter:()=>!t&&l?.(!0),onMouseLeave:()=>!t&&l?.(!1),children:r.jsxDEV(V.default,{ref:u,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!n,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:r.jsxDEV(v.CustomCarouselRightArrow,{isPreview:n??!1},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:158,columnNumber:15},void 0),prevArrow:r.jsxDEV(v.CustomCarouselLeftArrow,{isPreview:n??!1},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:159,columnNumber:15},void 0),children:e?.map((f,s)=>{const p={components:f.components,mapping:a?.mapping?.cards?.[s],content:a?.content,templateType:a?.templateType};return r.jsxDEV(x.default,{channel:d,currentTemplate:p,carouselCardIndex:s,isPreview:n,width:"100%",showSampleValues:m},s,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:169,columnNumber:6},void 0)})},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:148,columnNumber:3},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreview.tsx",lineNumber:142,columnNumber:2},void 0);exports.CarouselPreview=q;
 //# sourceMappingURL=CarouselPreview.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsxDEV","CarouselSlider","this","isRCSChannel","RCSCarousalContainer","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"ipBA6BaA,EAAkBC,EAAAA,QAAM,WAapC,CAAC,CACA,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,mBAAAC,EACA,aAAAC,EACA,WAAAC,EACA,WAAAC,EACA,iBAAAC,CAAA,IACK,CACL,KAAM,CACL,UAAAC,EACA,sBAAAC,EACA,UAAAC,EACA,qBAAAC,EACA,UAAWC,EACX,mBAAAC,CAAA,EACGC,0BAAA,EAEEC,EACLH,GAAc,GAAKI,EAAAA,mBAAmBhB,CAAO,EAAIY,EAC5CK,EAAShB,GAAuC,aACrDc,CACD,GAAG,MAEGG,EAAiBD,GAAO,OAC7BE,EAAAA,OAACC,EAAA,CACA,MAAAH,EACA,UAAWP,GAAa,EACxB,sBAAuBD,GAAyB,GAChD,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAkB,CAAC,CAACJ,EACpB,mBAAAM,CAAA,EAXD,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAQ,MAAA,EAaG,KAEJ,OAAIC,EAAAA,aAAatB,CAAO,EAEtBmB,EAAAA,OAACI,EAAAA,qBAAA,CAAqB,aAAAnB,EACpB,SAAAc,CAAA,EADF,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAG,MAEA,EAKDF,EAAAA,OAACK,EAAAA,UAAA,CACA,mBAAArB,EACA,aAAAC,EACA,WAAAE,EAEE,SAAA,EAAA,CAAC,CAACL,GAAW,mBACd,CAAC,CAACA,GAAW,gBACbkB,EAAAA,OAACM,EAAAA,gBACA,SAAAN,EAAAA,OAACO,UAAA,CAAc,MAAO,GAAI,OAAQ,EAAA,EAAlC,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAL,MAAsC,CAAA,EADvC,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAEA,EAEDF,EAAAA,OAACQ,EAAAA,QAAA,CACA,QAAA3B,EACA,gBAAiBC,EACjB,kBAAmB,GACnB,UAAAC,EACA,MAAM,KAAA,EALP,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAmB,MAAA,EAOCH,CAAA,CAAA,EAlBF,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAG,MAAA,CAqBF,CACD,EAEMD,EAAiB,CAAC,CACvB,MAAAH,EACA,UAAAP,EACA,sBAAAD,EACA,UAAAD,EACA,UAAAN,EACA,WAAAG,EACA,QAAAL,EACA,SAAAC,EACA,qBAAAU,EACA,iBAAAJ,EACA,mBAAAM,CACD,IAaCM,EAAAA,OAACS,EAAAA,uBAAA,CACA,UAAAlB,EACA,sBAAAD,EACA,aAAc,IAAM,CAACI,GAAsBF,IAAuB,EAAI,EACtE,aAAc,IAAM,CAACE,GAAsBF,IAAuB,EAAK,EAEvE,SAAAQ,EAAAA,OAACU,EAAAA,QAAA,CACA,IAAKrB,EACL,aAAY,GACZ,UAAS,GACT,MAAK,GACL,SAAU,GACV,cAAe,CAACN,EAChB,WAAU,GACV,OAAQG,EACR,eAAc,GACd,UAAWc,EAAAA,OAACW,EAAAA,yBAAA,CAAyB,UAAW5B,GAAa,EAAA,EAAlD,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,EAAA,EAAAmB,MAAyD,EACpE,UAAWF,EAAAA,OAACY,EAAAA,wBAAA,CAAwB,UAAW7B,GAAa,EAAA,EAAjD,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,EAAA,EAAAmB,MAAwD,EAElE,SAAAJ,GAAO,IAAI,CAACe,EAAUC,IAAU,CAChC,MAAMC,EAAkB,CACvB,WAAYF,EAAS,WACrB,QAAS/B,GAAU,SAAS,QAAQgC,CAAK,EACzC,QAAShC,GAAW,QACpB,aAAcA,GAAW,YAAc,EAExC,OACCkB,EAAAA,OAACQ,EAAAA,QAAA,CAEA,QAAA3B,EACA,gBAAiBkC,EACjB,kBAAmBD,EACnB,UAAA/B,EACA,MAAM,OACN,iBAAAK,CAAA,EANK0B,EADN,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAZ,MAAA,CAUF,CAAC,CAAA,EA/BF,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAAA,CAgCA,EAtCD,OAAA,GAAA,CAAA,SAAA,~~2GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAA,MAuCA"}
1	+ {"version":3,"file":"CarouselPreview.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport AiContentIcon from '@src/assets/icons/aiContentIcon.svg';\nimport React from 'react';\nimport Slider from 'react-slick';\nimport 'slick-carousel/slick/slick-theme.css';\nimport 'slick-carousel/slick/slick.css';\nimport {\n\tCarouselSlickContainer,\n\tContainer,\n} from '@src/components/carousel-preview/CarouselPreview.style';\nimport CarouselPreviewCard from '@src/components/carousel-preview/CarouselPreviewCard';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport {\n\tWhatsAppCarouselTemplate,\n\tWhatsAppCarouselTemplateCards,\n} from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { AiContentBadge } from '@src/components/template-preview/TemplatePreview.styled';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\nimport {\n\tdetermineCardIndex,\n\tisRCSChannel,\n} from '../template-preview/helpers/templateMiscHelper';\nimport { AllTemplateTypes } from '../template-preview/models/types';\nimport { RCSCarousalContainer } from '../template-preview/RCS/RCSPreview.styled';\nimport {\n\tCustomCarouselLeftArrow,\n\tCustomCarouselRightArrow,\n} from './CustomCarouselArrows';\n\nexport const CarouselPreview = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\ttemplate: AllTemplateTypes;\n\t\tshowSampleValues?: boolean;\n\t\tisPreview?: boolean;\n\t\tremoveBottomBorder?: boolean;\n\t\tborderRadius?: string;\n\t\tshowArrows?: boolean;\n\t\thideBorder?: boolean;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\ttemplate,\n\t\tisPreview,\n\t\tremoveBottomBorder,\n\t\tborderRadius,\n\t\tshowArrows,\n\t\thideBorder,\n\t\tshowSampleValues,\n\t}) => {\n\t\tconst {\n\t\t\tsliderRef,\n\t\t\tselectedCarouselIndex,\n\t\t\tcardCount,\n\t\t\tsetIsCarouselHovered,\n\t\t\tcardIndex: cardsIndex,\n\t\t\tshowVariablePicker,\n\t\t} = useTemplateModalContext();\n\n\t\tconst cardIndex =\n\t\t\tcardsIndex == -1 ? determineCardIndex(channel) : cardsIndex;\n\t\tconst cards = (template as WhatsAppCarouselTemplate)?.components?.[\n\t\t\tcardIndex\n\t\t]?.cards;\n\n\t\tconst carouselSlider = cards?.length ? (\n\t\t\t<CarouselSlider\n\t\t\t\tcards={cards}\n\t\t\t\tcardCount={cardCount ?? 0}\n\t\t\t\tselectedCarouselIndex={selectedCarouselIndex ?? -1}\n\t\t\t\tsliderRef={sliderRef}\n\t\t\t\tisPreview={isPreview}\n\t\t\t\tshowArrows={showArrows}\n\t\t\t\tchannel={channel}\n\t\t\t\ttemplate={template as WhatsAppCarouselTemplate}\n\t\t\t\tsetIsCarouselHovered={setIsCarouselHovered}\n\t\t\t\tshowSampleValues={!!showSampleValues}\n\t\t\t\tshowVariablePicker={showVariablePicker}\n\t\t\t/>\n\t\t) : null;\n\n\t\tif (isRCSChannel(channel)) {\n\t\t\treturn (\n\t\t\t\t<RCSCarousalContainer borderRadius={borderRadius}>\n\t\t\t\t\t{carouselSlider}\n\t\t\t\t</RCSCarousalContainer>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<Container\n\t\t\t\tremoveBottomBorder={removeBottomBorder}\n\t\t\t\tborderRadius={borderRadius}\n\t\t\t\thideBorder={hideBorder}\n\t\t\t>\n\t\t\t\t{(!!template?.['aiContentConfigId'] \|\|\n\t\t\t\t\t!!template?.['isAiGenerated']) && (\n\t\t\t\t\t<AiContentBadge>\n\t\t\t\t\t\t<AiContentIcon width={48} height={48} />\n\t\t\t\t\t</AiContentBadge>\n\t\t\t\t)}\n\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tcurrentTemplate={template}\n\t\t\t\t\tcarouselCardIndex={-1}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twidth=\"77%\"\n\t\t\t\t/>\n\t\t\t\t{carouselSlider}\n\t\t\t</Container>\n\t\t);\n\t},\n);\n\nconst CarouselSlider = ({\n\tcards,\n\tcardCount,\n\tselectedCarouselIndex,\n\tsliderRef,\n\tisPreview,\n\tshowArrows,\n\tchannel,\n\ttemplate,\n\tsetIsCarouselHovered,\n\tshowSampleValues,\n\tshowVariablePicker,\n}: {\n\tcards: WhatsAppCarouselTemplateCards[];\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n\tsliderRef: any;\n\tisPreview?: boolean;\n\tshowArrows?: boolean;\n\tchannel: CHANNEL_TYPE;\n\ttemplate: WhatsAppCarouselTemplate;\n\tsetIsCarouselHovered?: (value: boolean) => void;\n\tshowSampleValues?: boolean;\n\tshowVariablePicker?: boolean;\n}) => (\n\t<CarouselSlickContainer\n\t\tcardCount={cardCount}\n\t\tselectedCarouselIndex={selectedCarouselIndex}\n\t\tonMouseEnter={() => !showVariablePicker && setIsCarouselHovered?.(true)}\n\t\tonMouseLeave={() => !showVariablePicker && setIsCarouselHovered?.(false)}\n\t>\n\t\t<Slider\n\t\t\tref={sliderRef}\n\t\t\tswipeToSlide\n\t\t\tdraggable\n\t\t\tswipe\n\t\t\tinfinite={false}\n\t\t\tfocusOnSelect={!isPreview}\n\t\t\tcenterMode\n\t\t\tarrows={showArrows}\n\t\t\tadaptiveHeight\n\t\t\tnextArrow={<CustomCarouselRightArrow isPreview={isPreview ?? false} />}\n\t\t\tprevArrow={<CustomCarouselLeftArrow isPreview={isPreview ?? false} />}\n\t\t>\n\t\t\t{cards?.map((carousel, index) => {\n\t\t\t\tconst currentCarousel = {\n\t\t\t\t\tcomponents: carousel.components,\n\t\t\t\t\tmapping: template?.mapping?.cards?.[index],\n\t\t\t\t\tcontent: template?.['content'],\n\t\t\t\t\ttemplateType: template?.['templateType'],\n\t\t\t\t};\n\t\t\t\treturn (\n\t\t\t\t\t<CarouselPreviewCard\n\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\tchannel={channel}\n\t\t\t\t\t\tcurrentTemplate={currentCarousel}\n\t\t\t\t\t\tcarouselCardIndex={index}\n\t\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\t\twidth=\"100%\"\n\t\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t})}\n\t\t</Slider>\n\t</CarouselSlickContainer>\n);\n"],"names":["CarouselPreview","React","channel","template","isPreview","removeBottomBorder","borderRadius","showArrows","hideBorder","showSampleValues","sliderRef","selectedCarouselIndex","cardCount","setIsCarouselHovered","cardsIndex","showVariablePicker","useTemplateModalContext","cardIndex","determineCardIndex","cards","carouselSlider","jsxDEV","CarouselSlider","this","isRCSChannel","RCSCarousalContainer","Container","AiContentBadge","AiContentIcon","CarouselPreviewCard","CarouselSlickContainer","Slider","CustomCarouselRightArrow","CustomCarouselLeftArrow","carousel","index","currentCarousel"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-dev-runtime"),m=require("react"),p=require("../template-context-mapper/context/templateModalContext.js"),f=require("../template-preview/helpers/templateMiscHelper.js"),h=require("../template-preview/TemplatePreview.js"),v=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},b=v(m),C=b.default.forwardRef(({channel:e,currentTemplate:s,showSampleValues:i,carouselCardIndex:t,isPreview:n,width:r})=>{const{cardWidth:l,template:c,cardIndex:a}=p.useTemplateModalContext(),u=a==-1?f.determineCardIndex(e):a,d=(c?.components?.[u].cards?.length??0)-1===t?12:0;return o.jsxDEV("div",{style:{width:r||l,height:(t??-1)>-1?"100%":"auto"},children:o.jsxDEV(h.TemplatePreview,{showSampleValues:i,template:s,channel:e,size:"small",hideHeader:!0,carouselCardIndex:t,isWhatsappCarousel:!0,isPreview:n,whatsAppSpecificMeta:{templateContainerStyles:{marginRight:d,height:"100%"}}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreviewCard.tsx",lineNumber:49,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CarouselPreviewCard.tsx",lineNumber:43,columnNumber:4},void 0)});exports.default=C;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-dev-runtime"),m=require("react"),p=require("../template-context-mapper/context/templateModalContext.js"),f=require("../template-preview/helpers/templateMiscHelper.js"),v=require("../template-preview/TemplatePreview.js"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},w=b(m),h=w.default.forwardRef(({channel:e,currentTemplate:n,showSampleValues:s,carouselCardIndex:t,isPreview:i,width:r})=>{const{cardWidth:l,template:d,cardIndex:a}=p.useTemplateModalContext(),u=a==-1?f.determineCardIndex(e):a,c=(d?.components?.[u].cards?.length??0)-1===t?12:0;return o.jsxDEV("div",{style:{width:r||l,height:(t??-1)>-1?"100%":"auto"},children:o.jsxDEV(v.TemplatePreview,{showSampleValues:s,template:n,channel:e,size:"small",hideHeader:!0,carouselCardIndex:t,isWhatsappCarousel:!0,isPreview:i,whatsAppSpecificMeta:{templateContainerStyles:{marginRight:c,height:"100%"}}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreviewCard.tsx",lineNumber:49,columnNumber:5},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CarouselPreviewCard.tsx",lineNumber:43,columnNumber:4},void 0)});exports.default=h;
 //# sourceMappingURL=CarouselPreviewCard.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreviewCard.js","sources":["../../../../src/components/carousel-preview/CarouselPreviewCard.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { TemplatePreview } from '@src/components/template-preview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { determineCardIndex } from '../template-preview/helpers/templateMiscHelper';\n\nconst CarouselPreviewCard = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\tcurrentTemplate: any;\n\t\tshowSampleValues?: boolean;\n\t\tcarouselCardIndex?: number;\n\t\tisPreview?: boolean;\n\t\twidth?: string;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\tcurrentTemplate,\n\t\tshowSampleValues,\n\t\tcarouselCardIndex,\n\t\tisPreview,\n\t\twidth,\n\t}) => {\n\t\tconst {\n\t\t\tcardWidth,\n\t\t\ttemplate,\n\t\t\tcardIndex: cardInd,\n\t\t} = useTemplateModalContext();\n\t\tconst cardIndex =\n\t\t\tcardInd == -1 ? determineCardIndex(channel) : cardInd;\n\t\tconst marginRight =\n\t\t\t((template as WhatsAppCarouselTemplate)?.components?.[cardIndex].cards\n\t\t\t\t?.length ?? 0) -\n\t\t\t\t1 ===\n\t\t\tcarouselCardIndex\n\t\t\t\t? 12\n\t\t\t\t: 0;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: width ? width : cardWidth,\n\t\t\t\t\theight: (carouselCardIndex ?? -1) > -1 ? '100%' : 'auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<TemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\ttemplate={currentTemplate}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tsize={'small'}\n\t\t\t\t\thideHeader\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={true}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twhatsAppSpecificMeta={{\n\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\tmarginRight: marginRight,\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nexport default CarouselPreviewCard;\n"],"names":["CarouselPreviewCard","React","channel","currentTemplate","showSampleValues","carouselCardIndex","isPreview","width","cardWidth","template","cardInd","useTemplateModalContext","cardIndex","determineCardIndex","marginRight","jsxDEV","TemplatePreview","this"],"mappings":"kaAQMA,EAAsBC,EAAAA,QAAM,WAWjC,CAAC,CACA,QAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,UAAAC,EACA,MAAAC,CAAA,IACK,CACL,KAAM,CACL,UAAAC,EACA,SAAAC,EACA,UAAWC,CAAA,EACRC,0BAAA,EACEC,EACLF,GAAW,GAAKG,EAAAA,mBAAmBX,CAAO,EAAIQ,EACzCI,GACHL,GAAuC,aAAaG,CAAS,EAAE,OAC9D,QAAU,GACZ,IACDP,EACG,GACA,EACJ,OACCU,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,MAAOR,GAAgBC,EACvB,QAASH,GAAqB,IAAM,GAAK,OAAS,MAAA,EAGnD,SAAAU,EAAAA,OAACC,EAAAA,gBAAA,CACA,iBAAAZ,EACA,SAAUD,EACV,QAAAD,EACA,KAAM,QACN,WAAU,GACV,kBAAAG,EACA,mBAAoB,GACpB,UAAAC,EACA,qBAAsB,CACrB,wBAAyB,CACxB,YAAAQ,EACA,OAAQ,MAAA,CACT,CACD,EAdD,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAG,MAAA,CAeA,EArBD,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBF,CACD"}
1	+ {"version":3,"file":"CarouselPreviewCard.js","sources":["../../../../src/components/carousel-preview/CarouselPreviewCard.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport { useTemplateModalContext } from '@src/components/template-context-mapper/context/templateModalContext';\nimport { TemplatePreview } from '@src/components/template-preview';\nimport { CHANNEL_TYPE } from '@src/components/template-preview/models/Channels';\nimport { WhatsAppCarouselTemplate } from '@src/components/template-preview/models/WhatsappCarouselTemplate';\nimport { determineCardIndex } from '../template-preview/helpers/templateMiscHelper';\n\nconst CarouselPreviewCard = React.forwardRef<\n\tHTMLDivElement,\n\t{\n\t\tchannel: CHANNEL_TYPE;\n\t\tcurrentTemplate: any;\n\t\tshowSampleValues?: boolean;\n\t\tcarouselCardIndex?: number;\n\t\tisPreview?: boolean;\n\t\twidth?: string;\n\t}\n>(\n\t({\n\t\tchannel,\n\t\tcurrentTemplate,\n\t\tshowSampleValues,\n\t\tcarouselCardIndex,\n\t\tisPreview,\n\t\twidth,\n\t}) => {\n\t\tconst {\n\t\t\tcardWidth,\n\t\t\ttemplate,\n\t\t\tcardIndex: cardInd,\n\t\t} = useTemplateModalContext();\n\t\tconst cardIndex =\n\t\t\tcardInd == -1 ? determineCardIndex(channel) : cardInd;\n\t\tconst marginRight =\n\t\t\t((template as WhatsAppCarouselTemplate)?.components?.[cardIndex].cards\n\t\t\t\t?.length ?? 0) -\n\t\t\t\t1 ===\n\t\t\tcarouselCardIndex\n\t\t\t\t? 12\n\t\t\t\t: 0;\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\twidth: width ? width : cardWidth,\n\t\t\t\t\theight: (carouselCardIndex ?? -1) > -1 ? '100%' : 'auto',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<TemplatePreview\n\t\t\t\t\tshowSampleValues={showSampleValues}\n\t\t\t\t\ttemplate={currentTemplate}\n\t\t\t\t\tchannel={channel}\n\t\t\t\t\tsize={'small'}\n\t\t\t\t\thideHeader\n\t\t\t\t\tcarouselCardIndex={carouselCardIndex}\n\t\t\t\t\tisWhatsappCarousel={true}\n\t\t\t\t\tisPreview={isPreview}\n\t\t\t\t\twhatsAppSpecificMeta={{\n\t\t\t\t\t\ttemplateContainerStyles: {\n\t\t\t\t\t\t\tmarginRight: marginRight,\n\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t},\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\n\nexport default CarouselPreviewCard;\n"],"names":["CarouselPreviewCard","React","channel","currentTemplate","showSampleValues","carouselCardIndex","isPreview","width","cardWidth","template","cardInd","useTemplateModalContext","cardIndex","determineCardIndex","marginRight","jsxDEV","TemplatePreview","this"],"mappings":"kaAQMA,EAAsBC,EAAAA,QAAM,WAWjC,CAAC,CACA,QAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,kBAAAC,EACA,UAAAC,EACA,MAAAC,CAAA,IACK,CACL,KAAM,CACL,UAAAC,EACA,SAAAC,EACA,UAAWC,CAAA,EACRC,0BAAA,EACEC,EACLF,GAAW,GAAKG,EAAAA,mBAAmBX,CAAO,EAAIQ,EACzCI,GACHL,GAAuC,aAAaG,CAAS,EAAE,OAC9D,QAAU,GACZ,IACDP,EACG,GACA,EACJ,OACCU,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,MAAOR,GAAgBC,EACvB,QAASH,GAAqB,IAAM,GAAK,OAAS,MAAA,EAGnD,SAAAU,EAAAA,OAACC,EAAAA,gBAAA,CACA,iBAAAZ,EACA,SAAUD,EACV,QAAAD,EACA,KAAM,QACN,WAAU,GACV,kBAAAG,EACA,mBAAoB,GACpB,UAAAC,EACA,qBAAsB,CACrB,wBAAyB,CACxB,YAAAQ,EACA,OAAQ,MAAA,CACT,CACD,EAdD,OAAA,GAAA,CAAA,SAAA,8GAAA,WAAA,GAAA,aAAA,CAAA,EAAAG,MAAA,CAeA,EArBD,OAAA,GAAA,CAAA,SAAA,8GAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBF,CACD"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-dev-runtime"),d=require("../../assets/icons/chevronLeft.svg.js"),C=require("../../assets/icons/chevronRight.svg.js"),u=require("../../constants/Theme.js"),a=require("../template-context-mapper/context/templateModalContext.js"),p=t=>{const{className:n,style:l,onClick:o,isPreview:r}=t,{selectedCarouselIndex:e,setSelectedCarouselIndex:c}=a.useTemplateModalContext();return s.jsxDEV("div",{className:n,style:{...l,display:o&&(e??-1)>-1||r?"flex":"none",content:"none"},onClick:i=>{o?.(i),!((e??-1)<1||r)&&c?.((e??-1)-1)},children:s.jsxDEV(d.default,{height:10,width:10,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:33,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:15,columnNumber:3},void 0)},f=t=>{const{className:n,style:l,onClick:o,isPreview:r}=t,{selectedCarouselIndex:e,setSelectedCarouselIndex:c,cardCount:i}=a.useTemplateModalContext();return s.jsxDEV("div",{className:n,style:{...l,display:o&&(e??-1)>-1||r?"flex":"none",content:"none"},onClick:m=>{o?.(m),!((e??-1)>=(i??-1)-1||r)&&c?.((e??-1)+1)},children:s.jsxDEV(C.default,{height:10,width:10,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:67,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:46,columnNumber:3},void 0)};exports.CustomCarouselLeftArrow=p;exports.CustomCarouselRightArrow=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-dev-runtime"),m=require("../../assets/icons/chevronLeft.svg.js"),C=require("../../assets/icons/chevronRight.svg.js"),u=require("../../constants/Theme.js"),c=require("../template-context-mapper/context/templateModalContext.js"),f=n=>{const{className:t,style:l,onClick:o,isPreview:r}=n,{selectedCarouselIndex:e,setSelectedCarouselIndex:i}=c.useTemplateModalContext();return s.jsxDEV("div",{className:t,style:{...l,display:o&&(e??-1)>-1||r?"flex":"none",content:"none"},onClick:a=>{o?.(a),!((e??-1)<1||r)&&i?.((e??-1)-1)},children:s.jsxDEV(m.default,{height:10,width:10,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:33,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:15,columnNumber:3},void 0)},p=n=>{const{className:t,style:l,onClick:o,isPreview:r}=n,{selectedCarouselIndex:e,setSelectedCarouselIndex:i,cardCount:a}=c.useTemplateModalContext();return s.jsxDEV("div",{className:t,style:{...l,display:o&&(e??-1)>-1||r?"flex":"none",content:"none"},onClick:d=>{o?.(d),!((e??-1)>=(a??-1)-1||r)&&i?.((e??-1)+1)},children:s.jsxDEV(C.default,{height:10,width:10,color:u.COLORS.content.primary},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:67,columnNumber:4},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-preview/CustomCarouselArrows.tsx",lineNumber:46,columnNumber:3},void 0)};exports.CustomCarouselLeftArrow=f;exports.CustomCarouselRightArrow=p;
 //# sourceMappingURL=CustomCarouselArrows.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CustomCarouselArrows.js","sources":["../../../../src/components/carousel-preview/CustomCarouselArrows.tsx"],"sourcesContent":["import LeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport RightIcon from '@src/assets/icons/chevronRight.svg';\nimport { CustomArrowProps } from 'react-slick';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\n\nexport const CustomCarouselLeftArrow = (\n\tprops: CustomArrowProps & { isPreview: boolean },\n) => {\n\tconst { className, style, onClick, isPreview } = props;\n\tconst { selectedCarouselIndex, setSelectedCarouselIndex } =\n\t\tuseTemplateModalContext();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tdisplay:\n\t\t\t\t\t(onClick && (selectedCarouselIndex ?? -1) > -1) \|\| isPreview\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'none',\n\t\t\t\tcontent: 'none',\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\tonClick?.(e);\n\t\t\t\tif ((selectedCarouselIndex ?? -1) < 1 \|\| isPreview) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetSelectedCarouselIndex?.((selectedCarouselIndex ?? -1) - 1);\n\t\t\t}}\n\t\t>\n\t\t\t<LeftIcon height={10} width={10} color={COLORS.content.primary} />\n\t\t</div>\n\t);\n};\n\nexport const CustomCarouselRightArrow = (\n\tprops: CustomArrowProps & { isPreview: boolean },\n) => {\n\tconst { className, style, onClick, isPreview } = props;\n\tconst { selectedCarouselIndex, setSelectedCarouselIndex, cardCount } =\n\t\tuseTemplateModalContext();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tdisplay:\n\t\t\t\t\t(onClick && (selectedCarouselIndex ?? -1) > -1) \|\| isPreview\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'none',\n\t\t\t\tcontent: 'none',\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\tonClick?.(e);\n\t\t\t\tif (\n\t\t\t\t\t(selectedCarouselIndex ?? -1) >= (cardCount ?? -1) - 1 \|\|\n\t\t\t\t\tisPreview\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetSelectedCarouselIndex?.((selectedCarouselIndex ?? -1) + 1);\n\t\t\t}}\n\t\t>\n\t\t\t<RightIcon height={10} width={10} color={COLORS.content.primary} />\n\t\t</div>\n\t);\n};\n"],"names":["CustomCarouselLeftArrow","props","className","style","onClick","isPreview","selectedCarouselIndex","setSelectedCarouselIndex","useTemplateModalContext","jsxDEV","e","LeftIcon","COLORS","this","CustomCarouselRightArrow","cardCount","RightIcon"],"mappings":"8UAMaA,EACZC,GACI,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,UAAAC,GAAcJ,EAC3C,CAAE,sBAAAK,EAAuB,yBAAAC,CAAA,EAC9BC,0BAAA,EAED,OACCC,EAAAA,OAAC,MAAA,CACA,UAAAP,EACA,MAAO,CACN,GAAGC,EACH,QACEC,IAAYE,GAAyB,IAAM,IAAOD,EAChD,OACA,OACJ,QAAS,MAAA,EAEV,QAAUK,GAAM,CACfN,IAAUM,CAAC,EACN,GAAAJ,GAAyB,IAAM,GAAKD,IAGzCE,KAA4BD,GAAyB,IAAM,CAAC,CAC7D,EAEA,SAAAG,EAAAA,OAACE,EAAAA,SAAS,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAAA,OAAO,QAAQ,OAAA,EAAvD,OAAA,GAAA,CAAA,SAAA,~~gHAAA,~~WAAA,GAAA,aAAA,CAAA,EAAAC,MAAgE,CAAA,EAlBjE,OAAA,GAAA,CAAA,SAAA,~~gHAAA,~~WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAqBF,EAEaC,EACZb,GACI,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,UAAAC,GAAcJ,EAC3C,CAAE,sBAAAK,EAAuB,yBAAAC,EAA0B,UAAAQ,CAAA,EACxDP,EAAAA,wBAAA,EAED,OACCC,EAAAA,OAAC,MAAA,CACA,UAAAP,EACA,MAAO,CACN,GAAGC,EACH,QACEC,IAAYE,GAAyB,IAAM,IAAOD,EAChD,OACA,OACJ,QAAS,MAAA,EAEV,QAAUK,GAAM,CACfN,IAAUM,CAAC,EAET,GAAAJ,GAAyB,MAAQS,GAAa,IAAM,GACrDV,IAIDE,KAA4BD,GAAyB,IAAM,CAAC,CAC7D,EAEA,SAAAG,EAAAA,OAACO,EAAAA,SAAU,OAAQ,GAAI,MAAO,GAAI,MAAOJ,EAAAA,OAAO,QAAQ,OAAA,EAAxD,OAAA,GAAA,CAAA,SAAA,~~gHAAA,~~WAAA,GAAA,aAAA,CAAA,EAAAC,MAAiE,CAAA,EArBlE,OAAA,GAAA,CAAA,SAAA,~~gHAAA,~~WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBF"}
1	+ {"version":3,"file":"CustomCarouselArrows.js","sources":["../../../../src/components/carousel-preview/CustomCarouselArrows.tsx"],"sourcesContent":["import LeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport RightIcon from '@src/assets/icons/chevronRight.svg';\nimport { CustomArrowProps } from 'react-slick';\nimport { COLORS } from '@src/constants/Theme';\nimport { useTemplateModalContext } from '../template-context-mapper/context/templateModalContext';\n\nexport const CustomCarouselLeftArrow = (\n\tprops: CustomArrowProps & { isPreview: boolean },\n) => {\n\tconst { className, style, onClick, isPreview } = props;\n\tconst { selectedCarouselIndex, setSelectedCarouselIndex } =\n\t\tuseTemplateModalContext();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tdisplay:\n\t\t\t\t\t(onClick && (selectedCarouselIndex ?? -1) > -1) \|\| isPreview\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'none',\n\t\t\t\tcontent: 'none',\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\tonClick?.(e);\n\t\t\t\tif ((selectedCarouselIndex ?? -1) < 1 \|\| isPreview) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetSelectedCarouselIndex?.((selectedCarouselIndex ?? -1) - 1);\n\t\t\t}}\n\t\t>\n\t\t\t<LeftIcon height={10} width={10} color={COLORS.content.primary} />\n\t\t</div>\n\t);\n};\n\nexport const CustomCarouselRightArrow = (\n\tprops: CustomArrowProps & { isPreview: boolean },\n) => {\n\tconst { className, style, onClick, isPreview } = props;\n\tconst { selectedCarouselIndex, setSelectedCarouselIndex, cardCount } =\n\t\tuseTemplateModalContext();\n\n\treturn (\n\t\t<div\n\t\t\tclassName={className}\n\t\t\tstyle={{\n\t\t\t\t...style,\n\t\t\t\tdisplay:\n\t\t\t\t\t(onClick && (selectedCarouselIndex ?? -1) > -1) \|\| isPreview\n\t\t\t\t\t\t? 'flex'\n\t\t\t\t\t\t: 'none',\n\t\t\t\tcontent: 'none',\n\t\t\t}}\n\t\t\tonClick={(e) => {\n\t\t\t\tonClick?.(e);\n\t\t\t\tif (\n\t\t\t\t\t(selectedCarouselIndex ?? -1) >= (cardCount ?? -1) - 1 \|\|\n\t\t\t\t\tisPreview\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tsetSelectedCarouselIndex?.((selectedCarouselIndex ?? -1) + 1);\n\t\t\t}}\n\t\t>\n\t\t\t<RightIcon height={10} width={10} color={COLORS.content.primary} />\n\t\t</div>\n\t);\n};\n"],"names":["CustomCarouselLeftArrow","props","className","style","onClick","isPreview","selectedCarouselIndex","setSelectedCarouselIndex","useTemplateModalContext","jsxDEV","e","LeftIcon","COLORS","this","CustomCarouselRightArrow","cardCount","RightIcon"],"mappings":"8UAMaA,EACZC,GACI,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,UAAAC,GAAcJ,EAC3C,CAAE,sBAAAK,EAAuB,yBAAAC,CAAA,EAC9BC,0BAAA,EAED,OACCC,EAAAA,OAAC,MAAA,CACA,UAAAP,EACA,MAAO,CACN,GAAGC,EACH,QACEC,IAAYE,GAAyB,IAAM,IAAOD,EAChD,OACA,OACJ,QAAS,MAAA,EAEV,QAAUK,GAAM,CACfN,IAAUM,CAAC,EACN,GAAAJ,GAAyB,IAAM,GAAKD,IAGzCE,KAA4BD,GAAyB,IAAM,CAAC,CAC7D,EAEA,SAAAG,EAAAA,OAACE,EAAAA,SAAS,OAAQ,GAAI,MAAO,GAAI,MAAOC,EAAAA,OAAO,QAAQ,OAAA,EAAvD,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAgE,CAAA,EAlBjE,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAqBF,EAEaC,EACZb,GACI,CACJ,KAAM,CAAE,UAAAC,EAAW,MAAAC,EAAO,QAAAC,EAAS,UAAAC,GAAcJ,EAC3C,CAAE,sBAAAK,EAAuB,yBAAAC,EAA0B,UAAAQ,CAAA,EACxDP,EAAAA,wBAAA,EAED,OACCC,EAAAA,OAAC,MAAA,CACA,UAAAP,EACA,MAAO,CACN,GAAGC,EACH,QACEC,IAAYE,GAAyB,IAAM,IAAOD,EAChD,OACA,OACJ,QAAS,MAAA,EAEV,QAAUK,GAAM,CACfN,IAAUM,CAAC,EAET,GAAAJ,GAAyB,MAAQS,GAAa,IAAM,GACrDV,IAIDE,KAA4BD,GAAyB,IAAM,CAAC,CAC7D,EAEA,SAAAG,EAAAA,OAACO,EAAAA,SAAU,OAAQ,GAAI,MAAO,GAAI,MAAOJ,EAAAA,OAAO,QAAQ,OAAA,EAAxD,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,GAAA,aAAA,CAAA,EAAAC,MAAiE,CAAA,EArBlE,OAAA,GAAA,CAAA,SAAA,+GAAA,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,CAwBF"}

package/dist/cjs/components/carousel-secondary/CarouselSecondary.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-dev-runtime"),V=require("../../assets/icons/chevronLeft2.svg.js"),N=require("../../assets/icons/chevronLeft.svg.js"),k=require("../../assets/icons/chevronRight2.svg.js"),p=require("../../assets/icons/chevronRight.svg.js"),i=require("react"),m=require("../button/Button.js"),c=require("./CarouselSecondary.style.js"),o=require("./model.js"),j=({pages:t,onComplete:b,textAlign:y,version:e,onCompleteText:d})=>{const[n,u]=i.useState(0),l=i.useRef(null),f=()=>{u(r=>r===t.length-1?r:r+1),n===t.length-1&&b()},h=()=>{u(r=>r===0?r:r-1)},C=r=>{u(r)};return i.useEffect(()=>{l.current&&l.current.scrollTo({left:l.current.offsetWidth*n,behavior:"smooth"})},[n]),s.jsxDEV(c.CarouselContainer,{version:e||o.CarouselVersion.V1,children:[s.jsxDEV(c.CarouselBody,{ref:l,textAlign:y,children:t.map((r,a)=>s.jsxDEV(c.CarouselPage,{isActive:a===n,children:r},a,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:63,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:61,columnNumber:4},void 0),s.jsxDEV(c.CarouselFooter,{version:e||o.CarouselVersion.V1,children:[s.jsxDEV("div",{style:{visibility:e===o.CarouselVersion.V2&&n===0?"hidden":"visible"},children:s.jsxDEV(m.Button,{buttonText:"Back",buttonType:"tertiaryGray",onClick:h,size:e===o.CarouselVersion.V2?"small":"medium",LeadingIcon:e===o.CarouselVersion.V2?V.default:N.default,disabled:!n},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:77,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:69,columnNumber:5},void 0),s.jsxDEV(c.PageIndicator,{children:t.map((r,a)=>s.jsxDEV(c.Indicator,{isActive:a===n,version:e||o.CarouselVersion.V1,onClick:()=>C(a)},a,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:92,columnNumber:7},void 0))},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:90,columnNumber:5},void 0),s.jsxDEV(m.Button,{buttonText:n===t.length-1?d||"Get started":"Next",buttonType:n===t.length-1||e===o.CarouselVersion.V2?"tertiary":"tertiaryGray",onClick:f,size:e===o.CarouselVersion.V2?"small":"medium",TrailingIcon:n<t.length-1?e===o.CarouselVersion.V2?k.default:p.default:void 0,style:e===o.CarouselVersion.V2?{}:{background:"transparent"}},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:100,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:68,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:60,columnNumber:3},void 0)};exports.CarouselVersion=o.CarouselVersion;exports.CarouselSecondary=j;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-dev-runtime"),N=require("../../assets/icons/chevronLeft2.svg.js"),h=require("../../assets/icons/chevronLeft.svg.js"),x=require("../../assets/icons/chevronRight2.svg.js"),D=require("../../assets/icons/chevronRight.svg.js"),u=require("react"),m=require("../button/Button.js"),i=require("./CarouselSecondary.style.js"),r=require("./model.js"),k=({pages:a,onComplete:y,textAlign:b,version:e,onCompleteText:d})=>{const[n,c]=u.useState(0),t=u.useRef(null),f=()=>{c(o=>o===a.length-1?o:o+1),n===a.length-1&&y()},C=()=>{c(o=>o===0?o:o-1)},V=o=>{c(o)};return u.useEffect(()=>{t.current&&t.current.scrollTo({left:t.current.offsetWidth*n,behavior:"smooth"})},[n]),s.jsxDEV(i.CarouselContainer,{version:e||r.CarouselVersion.V1,children:[s.jsxDEV(i.CarouselBody,{ref:t,textAlign:b,children:a.map((o,l)=>s.jsxDEV(i.CarouselPage,{isActive:l===n,children:o},l,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:63,columnNumber:6},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:61,columnNumber:4},void 0),s.jsxDEV(i.CarouselFooter,{version:e||r.CarouselVersion.V1,children:[s.jsxDEV("div",{style:{visibility:e===r.CarouselVersion.V2&&n===0?"hidden":"visible"},children:s.jsxDEV(m.Button,{buttonText:"Back",buttonType:"tertiaryGray",onClick:C,size:e===r.CarouselVersion.V2?"small":"medium",LeadingIcon:e===r.CarouselVersion.V2?N.default:h.default,disabled:!n},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:77,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:69,columnNumber:5},void 0),s.jsxDEV(i.PageIndicator,{children:a.map((o,l)=>s.jsxDEV(i.Indicator,{isActive:l===n,version:e||r.CarouselVersion.V1,onClick:()=>V(l)},l,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:92,columnNumber:7},void 0))},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:90,columnNumber:5},void 0),s.jsxDEV(m.Button,{buttonText:n===a.length-1?d||"Get started":"Next",buttonType:n===a.length-1||e===r.CarouselVersion.V2?"tertiary":"tertiaryGray",onClick:f,size:e===r.CarouselVersion.V2?"small":"medium",TrailingIcon:n<a.length-1?e===r.CarouselVersion.V2?x.default:D.default:void 0,style:e===r.CarouselVersion.V2?{}:{background:"transparent"}},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:100,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:68,columnNumber:4},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/carousel-secondary/CarouselSecondary.tsx",lineNumber:60,columnNumber:3},void 0)};exports.CarouselVersion=r.CarouselVersion;exports.CarouselSecondary=k;
 //# sourceMappingURL=CarouselSecondary.js.map

package/dist/cjs/components/carousel-secondary/CarouselSecondary.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselSecondary.js","sources":["../../../../src/components/carousel-secondary/CarouselSecondary.tsx"],"sourcesContent":["import ChevronLeftIcon2 from '@src/assets/icons/chevronLeft2.svg';\nimport ChevronLeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRightIcon2 from '@src/assets/icons/chevronRight2.svg';\nimport ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '@src/components/button/Button';\nimport {\n\tCarouselBody,\n\tCarouselContainer,\n\tCarouselFooter,\n\tCarouselPage,\n\tIndicator,\n\tPageIndicator,\n} from './CarouselSecondary.style';\nimport { CarouselVersion } from './model';\n\nexport interface CarouselProps {\n\tpages: Array<React.FunctionComponent<React.SVGAttributes<SVGElement>> \| any>;\n\tonComplete: () => void;\n\ttextAlign?: string;\n\tversion?: CarouselVersion;\n\tonCompleteText?: string;\n}\n\nexport const CarouselSecondary: React.FC<CarouselProps> = ({\n\tpages,\n\tonComplete,\n\ttextAlign,\n\tversion,\n\tonCompleteText,\n}) => {\n\tconst [currentPage, setCurrentPage] = useState(0);\n\tconst carouselRef = useRef<HTMLDivElement>(null);\n\n\tconst handleNextPage = () => {\n\t\tsetCurrentPage((prevPage) =>\n\t\t\tprevPage === pages.length - 1 ? prevPage : prevPage + 1,\n\t\t);\n\t\tif (currentPage === pages.length - 1) onComplete();\n\t};\n\n\tconst handlePrevPage = () => {\n\t\tsetCurrentPage((prevPage) => (prevPage === 0 ? prevPage : prevPage - 1));\n\t};\n\n\tconst handlePageClick = (pageIndex) => {\n\t\tsetCurrentPage(pageIndex);\n\t};\n\n\tuseEffect(() => {\n\t\tif (carouselRef.current) {\n\t\t\tcarouselRef.current.scrollTo({\n\t\t\t\tleft: carouselRef.current.offsetWidth * currentPage,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t});\n\t\t}\n\t}, [currentPage]);\n\n\treturn (\n\t\t<CarouselContainer version={version ? version : CarouselVersion.V1}>\n\t\t\t<CarouselBody ref={carouselRef} textAlign={textAlign}>\n\t\t\t\t{pages.map((page, index) => (\n\t\t\t\t\t<CarouselPage key={index} isActive={index === currentPage}>\n\t\t\t\t\t\t{page}\n\t\t\t\t\t</CarouselPage>\n\t\t\t\t))}\n\t\t\t</CarouselBody>\n\t\t\t<CarouselFooter version={version ? version : CarouselVersion.V1}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tvisibility:\n\t\t\t\t\t\t\tversion === CarouselVersion.V2 && currentPage === 0\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'visible',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Back'}\n\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\tonClick={handlePrevPage}\n\t\t\t\t\t\tsize={version === CarouselVersion.V2 ? 'small' : 'medium'}\n\t\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\t\tversion === CarouselVersion.V2\n\t\t\t\t\t\t\t\t? ChevronLeftIcon2\n\t\t\t\t\t\t\t\t: ChevronLeftIcon\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={!currentPage}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<PageIndicator>\n\t\t\t\t\t{pages.map((_, index) => (\n\t\t\t\t\t\t<Indicator\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tisActive={index === currentPage}\n\t\t\t\t\t\t\tversion={version ? version : CarouselVersion.V1}\n\t\t\t\t\t\t\tonClick={() => handlePageClick(index)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</PageIndicator>\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={\n\t\t\t\t\t\tcurrentPage === pages.length - 1\n\t\t\t\t\t\t\t? onCompleteText\n\t\t\t\t\t\t\t\t? onCompleteText\n\t\t\t\t\t\t\t\t: 'Get started'\n\t\t\t\t\t\t\t: 'Next'\n\t\t\t\t\t}\n\t\t\t\t\tbuttonType={\n\t\t\t\t\t\tcurrentPage === pages.length - 1\n\t\t\t\t\t\t\t? 'tertiary'\n\t\t\t\t\t\t\t: version === CarouselVersion.V2\n\t\t\t\t\t\t\t? 'tertiary'\n\t\t\t\t\t\t\t: 'tertiaryGray'\n\t\t\t\t\t}\n\t\t\t\t\tonClick={handleNextPage}\n\t\t\t\t\tsize={version === CarouselVersion.V2 ? 'small' : 'medium'}\n\t\t\t\t\tTrailingIcon={\n\t\t\t\t\t\tcurrentPage < pages.length - 1\n\t\t\t\t\t\t\t? version === CarouselVersion.V2\n\t\t\t\t\t\t\t\t? ChevronRightIcon2\n\t\t\t\t\t\t\t\t: ChevronRightIcon\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tversion === CarouselVersion.V2 ? {} : { background: 'transparent' }\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</CarouselFooter>\n\t\t</CarouselContainer>\n\t);\n};\nexport { CarouselVersion };\n"],"names":["CarouselSecondary","pages","onComplete","textAlign","version","onCompleteText","currentPage","setCurrentPage","useState","carouselRef","useRef","handleNextPage","prevPage","handlePrevPage","handlePageClick","pageIndex","useEffect","CarouselContainer","CarouselVersion","jsxDEV","CarouselBody","page","index","CarouselPage","this","CarouselFooter","Button","ChevronLeftIcon2","ChevronLeftIcon","PageIndicator","_","Indicator","ChevronRightIcon2","ChevronRightIcon"],"mappings":"+bAwBaA,EAA6C,CAAC,CAC1D,MAAAC,EACA,WAAAC,EACA,UAAAC,EACA,QAAAC,EACA,eAAAC,CACD,IAAM,CACL,KAAM,CAACC,EAAaC,CAAc,EAAIC,EAAAA,SAAS,CAAC,EAC1CC,EAAcC,EAAAA,OAAuB,IAAI,EAEzCC,EAAiB,IAAM,CAC5BJ,EAAgBK,GACfA,IAAaX,EAAM,OAAS,EAAIW,EAAWA,EAAW,CAAA,EAEnDN,IAAgBL,EAAM,OAAS,GAAGC,EAAA,CACvC,EAEMW,EAAiB,IAAM,CAC5BN,EAAgBK,GAAcA,IAAa,EAAIA,EAAWA,EAAW,CAAE,CACxE,EAEME,EAAmBC,GAAc,CACtCR,EAAeQ,CAAS,CACzB,EAEAC,OAAAA,EAAAA,UAAU,IAAM,CACXP,EAAY,SACfA,EAAY,QAAQ,SAAS,CAC5B,KAAMA,EAAY,QAAQ,YAAcH,EACxC,SAAU,QAAA,CACV,CAEH,EAAG,CAACA,CAAW,CAAC,WAGdW,EAAAA,kBAAA,CAAkB,QAASb,GAAoBc,EAAAA,gBAAgB,GAC/D,SAAA,CAAAC,SAACC,EAAAA,aAAA,CAAa,IAAKX,EAAa,UAAAN,EAC9B,WAAM,IAAI,CAACkB,EAAMC,aAChBC,EAAAA,aAAA,CAAyB,SAAUD,IAAUhB,EAC5C,YADiBgB,EAAnB,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAE,MAEA,CACA,GALF,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAMA,WACCC,EAAAA,eAAA,CAAe,QAASrB,GAAoBc,EAAAA,gBAAgB,GAC5D,SAAA,CAAAC,EAAAA,OAAC,MAAA,CACA,MAAO,CACN,WACCf,IAAYc,EAAAA,gBAAgB,IAAMZ,IAAgB,EAC/C,SACA,SAAA,EAGL,SAAAa,EAAAA,OAACO,EAAAA,OAAA,CACA,WAAY,OACZ,WAAY,eACZ,QAASb,EACT,KAAMT,IAAYc,EAAAA,gBAAgB,GAAK,QAAU,SACjD,YACCd,IAAYc,EAAAA,gBAAgB,GACzBS,EAAAA,QACAC,EAAAA,QAEJ,SAAU,CAACtB,CAAA,EAVZ,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAkB,MAAA,CAWA,EAnBD,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAAA,WAqBCK,EAAAA,cAAA,CACC,SAAA5B,EAAM,IAAI,CAAC6B,EAAGR,IACdH,EAAAA,OAACY,EAAAA,UAAA,CAEA,SAAUT,IAAUhB,EACpB,QAASF,GAAoBc,EAAAA,gBAAgB,GAC7C,QAAS,IAAMJ,EAAgBQ,CAAK,CAAA,EAH/BA,EADN,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAE,MAAA,CAMA,CAAA,EARF,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MASA,EACAL,EAAAA,OAACO,EAAAA,OAAA,CACA,WACCpB,IAAgBL,EAAM,OAAS,EAC5BI,GAEC,cACD,OAEJ,WACCC,IAAgBL,EAAM,OAAS,GAE5BG,IAAYc,EAAAA,gBAAgB,GAD5B,WAGA,eAEJ,QAASP,EACT,KAAMP,IAAYc,EAAAA,gBAAgB,GAAK,QAAU,SACjD,aACCZ,EAAcL,EAAM,OAAS,EAC1BG,IAAYc,EAAAA,gBAAgB,GAC3Bc,UACAC,EAAAA,QACD,OAEJ,MACC7B,IAAYc,EAAAA,gBAAgB,GAAK,CAAA,EAAK,CAAE,WAAY,aAAA,CAAc,EAzBpE,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,IAAA,aAAA,CAAA,EAAAM,MAAA,CA2BA,CAAA,EA3DD,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MA4DA,CAAA,CAAA,EApED,OAAA,GAAA,CAAA,SAAA~~,+GAAA~~,WAAA,GAAA,aAAA,CAAA,EAAAA,MAqEA,CAEF"}
1	+ {"version":3,"file":"CarouselSecondary.js","sources":["../../../../src/components/carousel-secondary/CarouselSecondary.tsx"],"sourcesContent":["import ChevronLeftIcon2 from '@src/assets/icons/chevronLeft2.svg';\nimport ChevronLeftIcon from '@src/assets/icons/chevronLeft.svg';\nimport ChevronRightIcon2 from '@src/assets/icons/chevronRight2.svg';\nimport ChevronRightIcon from '@src/assets/icons/chevronRight.svg';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Button } from '@src/components/button/Button';\nimport {\n\tCarouselBody,\n\tCarouselContainer,\n\tCarouselFooter,\n\tCarouselPage,\n\tIndicator,\n\tPageIndicator,\n} from './CarouselSecondary.style';\nimport { CarouselVersion } from './model';\n\nexport interface CarouselProps {\n\tpages: Array<React.FunctionComponent<React.SVGAttributes<SVGElement>> \| any>;\n\tonComplete: () => void;\n\ttextAlign?: string;\n\tversion?: CarouselVersion;\n\tonCompleteText?: string;\n}\n\nexport const CarouselSecondary: React.FC<CarouselProps> = ({\n\tpages,\n\tonComplete,\n\ttextAlign,\n\tversion,\n\tonCompleteText,\n}) => {\n\tconst [currentPage, setCurrentPage] = useState(0);\n\tconst carouselRef = useRef<HTMLDivElement>(null);\n\n\tconst handleNextPage = () => {\n\t\tsetCurrentPage((prevPage) =>\n\t\t\tprevPage === pages.length - 1 ? prevPage : prevPage + 1,\n\t\t);\n\t\tif (currentPage === pages.length - 1) onComplete();\n\t};\n\n\tconst handlePrevPage = () => {\n\t\tsetCurrentPage((prevPage) => (prevPage === 0 ? prevPage : prevPage - 1));\n\t};\n\n\tconst handlePageClick = (pageIndex) => {\n\t\tsetCurrentPage(pageIndex);\n\t};\n\n\tuseEffect(() => {\n\t\tif (carouselRef.current) {\n\t\t\tcarouselRef.current.scrollTo({\n\t\t\t\tleft: carouselRef.current.offsetWidth * currentPage,\n\t\t\t\tbehavior: 'smooth',\n\t\t\t});\n\t\t}\n\t}, [currentPage]);\n\n\treturn (\n\t\t<CarouselContainer version={version ? version : CarouselVersion.V1}>\n\t\t\t<CarouselBody ref={carouselRef} textAlign={textAlign}>\n\t\t\t\t{pages.map((page, index) => (\n\t\t\t\t\t<CarouselPage key={index} isActive={index === currentPage}>\n\t\t\t\t\t\t{page}\n\t\t\t\t\t</CarouselPage>\n\t\t\t\t))}\n\t\t\t</CarouselBody>\n\t\t\t<CarouselFooter version={version ? version : CarouselVersion.V1}>\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tvisibility:\n\t\t\t\t\t\t\tversion === CarouselVersion.V2 && currentPage === 0\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'visible',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tbuttonText={'Back'}\n\t\t\t\t\t\tbuttonType={'tertiaryGray'}\n\t\t\t\t\t\tonClick={handlePrevPage}\n\t\t\t\t\t\tsize={version === CarouselVersion.V2 ? 'small' : 'medium'}\n\t\t\t\t\t\tLeadingIcon={\n\t\t\t\t\t\t\tversion === CarouselVersion.V2\n\t\t\t\t\t\t\t\t? ChevronLeftIcon2\n\t\t\t\t\t\t\t\t: ChevronLeftIcon\n\t\t\t\t\t\t}\n\t\t\t\t\t\tdisabled={!currentPage}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t<PageIndicator>\n\t\t\t\t\t{pages.map((_, index) => (\n\t\t\t\t\t\t<Indicator\n\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\tisActive={index === currentPage}\n\t\t\t\t\t\t\tversion={version ? version : CarouselVersion.V1}\n\t\t\t\t\t\t\tonClick={() => handlePageClick(index)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</PageIndicator>\n\t\t\t\t<Button\n\t\t\t\t\tbuttonText={\n\t\t\t\t\t\tcurrentPage === pages.length - 1\n\t\t\t\t\t\t\t? onCompleteText\n\t\t\t\t\t\t\t\t? onCompleteText\n\t\t\t\t\t\t\t\t: 'Get started'\n\t\t\t\t\t\t\t: 'Next'\n\t\t\t\t\t}\n\t\t\t\t\tbuttonType={\n\t\t\t\t\t\tcurrentPage === pages.length - 1\n\t\t\t\t\t\t\t? 'tertiary'\n\t\t\t\t\t\t\t: version === CarouselVersion.V2\n\t\t\t\t\t\t\t? 'tertiary'\n\t\t\t\t\t\t\t: 'tertiaryGray'\n\t\t\t\t\t}\n\t\t\t\t\tonClick={handleNextPage}\n\t\t\t\t\tsize={version === CarouselVersion.V2 ? 'small' : 'medium'}\n\t\t\t\t\tTrailingIcon={\n\t\t\t\t\t\tcurrentPage < pages.length - 1\n\t\t\t\t\t\t\t? version === CarouselVersion.V2\n\t\t\t\t\t\t\t\t? ChevronRightIcon2\n\t\t\t\t\t\t\t\t: ChevronRightIcon\n\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t}\n\t\t\t\t\tstyle={\n\t\t\t\t\t\tversion === CarouselVersion.V2 ? {} : { background: 'transparent' }\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</CarouselFooter>\n\t\t</CarouselContainer>\n\t);\n};\nexport { CarouselVersion };\n"],"names":["CarouselSecondary","pages","onComplete","textAlign","version","onCompleteText","currentPage","setCurrentPage","useState","carouselRef","useRef","handleNextPage","prevPage","handlePrevPage","handlePageClick","pageIndex","useEffect","CarouselContainer","CarouselVersion","jsxDEV","CarouselBody","page","index","CarouselPage","this","CarouselFooter","Button","ChevronLeftIcon2","ChevronLeftIcon","PageIndicator","_","Indicator","ChevronRightIcon2","ChevronRightIcon"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-dev-runtime"),c=require("react"),h=require("./CheckBox.styled.js"),t=require("../TypographyStyle.js"),l=require("../../constants/Theme.js"),y=e=>{const n=c.useMemo(()=>e.activeColor||l.COLORS.background.positive.vibrant,[e.activeColor]);return i.jsxDEV("svg",{width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",viewBox:e.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsxDEV("rect",{x:"0",y:"0",width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",rx:"4",fill:e.isDisabled?l.COLORS.content.inactive:n},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:56,columnNumber:4},void 0),!e.isPartial&&i.jsxDEV("svg",{width:e.isSmall?"8":"10",height:e.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i.jsxDEV("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:74,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:65,columnNumber:5},void 0),e.isPartial&&i.jsxDEV("rect",{x:"5",y:e.isSmall?"7":"8",width:e.isSmall?"6":"8",height:"2",rx:"1",fill:l.COLORS.surface.standard},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:83,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:49,columnNumber:3},void 0)},S=e=>{const[n,a]=c.useState(e.isChecked||!1),[o,r]=c.useState(e.isPartiallyChecked||!1),[s,b]=c.useState(e.isDisabled||!1),[k,d]=c.useState(!1),[x,m]=c.useState(!1),f=N=>{if(!e.isDisabled){const u=!n;o?r(!o):a(u),e.onValueChange?.(u,e.value,N)}};c.useEffect(()=>{a(e.isChecked)},[e.isChecked]),c.useEffect(()=>{b(e.isDisabled||!1)},[e.isDisabled]),c.useEffect(()=>{r(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const C=()=>e.label?e.boldOnChecked&&n||e.bold?e.labelSize==="DEFAULT"?i.jsxDEV(t.TitleRegular,{color:e.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:137,columnNumber:6},void 0):i.jsxDEV(t.TitleSmall,{color:e.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:147,columnNumber:5},void 0):e.size==="SMALL"?i.jsxDEV(t.BodySecondary,{color:e.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:157,columnNumber:5},void 0):e.labelSize==="SMALL"?i.jsxDEV(t.BodySecondary,{color:e.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:167,columnNumber:5},void 0):i.jsxDEV(t.BodyPrimary,{color:e.isDisabled?l.COLORS.text.disabled:l.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:176,columnNumber:4},void 0):i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:131,columnNumber:11},void 0);return i.jsxDEV(h.CheckboxContainer,{onClick:f,onMouseEnter:()=>d(!e.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>m(!e.skipHoverState),onMouseUp:()=>m(!1),isDisabled:s,enableHover:e.enableHover,style:e.style??{},children:[i.jsxDEV(h.CheckboxIcon,{checked:n,hovered:k,clicked:x,isDisabled:s,size:e.size,borderColor:e.checkboxBorderColor,children:n&&i.jsxDEV(y,{isPartial:o||!1,isDisabled:s,isSmall:e.size==="SMALL",activeColor:e?.activeColor},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:204,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:195,columnNumber:4},void 0),C(),e.rightComponent]},void 0,!0,{fileName:"/Users/prateekchouhan/Projects/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:185,columnNumber:3},void 0)};exports.CheckBox=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-dev-runtime"),l=require("react"),b=require("./CheckBox.styled.js"),s=require("../TypographyStyle.js"),n=require("../../constants/Theme.js"),D=e=>{const o=l.useMemo(()=>e.activeColor||n.COLORS.background.positive.vibrant,[e.activeColor]);return i.jsxDEV("svg",{width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",viewBox:e.isSmall?"0 0 16 16":"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[i.jsxDEV("rect",{x:"0",y:"0",width:e.isSmall?"16":"18",height:e.isSmall?"16":"18",rx:"4",fill:e.isDisabled?n.COLORS.content.inactive:o},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:56,columnNumber:4},void 0),!e.isPartial&&i.jsxDEV("svg",{width:e.isSmall?"8":"10",height:e.isSmall?"7":"9",x:"4",y:"4",viewBox:"0 0 10 9",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:i.jsxDEV("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M9.68189 1.06043C10.0724 1.45096 10.0724 2.08412 9.68189 2.47464L4.02501 8.13152C3.63449 8.52205 3.00132 8.52205 2.6108 8.13152L0.489684 6.01041C0.0991601 5.61988 0.0991598 4.98672 0.489684 4.59619C0.880209 4.20567 1.51337 4.20567 1.9039 4.59619L3.31791 6.0102L8.26768 1.06043C8.6582 0.669907 9.29137 0.669907 9.68189 1.06043Z",fill:"white"},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:74,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:65,columnNumber:5},void 0),e.isPartial&&i.jsxDEV("rect",{x:"5",y:e.isSmall?"7":"8",width:e.isSmall?"6":"8",height:"2",rx:"1",fill:n.COLORS.surface.standard},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:83,columnNumber:5},void 0)]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:49,columnNumber:3},void 0)},N=e=>{const[o,t]=l.useState(e.isChecked||!1),[a,r]=l.useState(e.isPartiallyChecked||!1),[c,x]=l.useState(e.isDisabled||!1),[h,d]=l.useState(!1),[f,m]=l.useState(!1),k=y=>{if(!e.isDisabled){const u=!o;a?r(!a):t(u),e.onValueChange?.(u,e.value,y)}};l.useEffect(()=>{t(e.isChecked)},[e.isChecked]),l.useEffect(()=>{x(e.isDisabled||!1)},[e.isDisabled]),l.useEffect(()=>{r(e.isPartiallyChecked||!1)},[e.isPartiallyChecked]);const C=()=>e.label?e.boldOnChecked&&o||e.bold?e.labelSize==="DEFAULT"?i.jsxDEV(s.TitleRegular,{color:e.isDisabled?n.COLORS.text.disabled:n.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:137,columnNumber:6},void 0):i.jsxDEV(s.TitleSmall,{color:e.isDisabled?n.COLORS.text.disabled:n.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:147,columnNumber:5},void 0):e.size==="SMALL"?i.jsxDEV(s.BodySecondary,{color:e.isDisabled?n.COLORS.text.disabled:n.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:157,columnNumber:5},void 0):e.labelSize==="SMALL"?i.jsxDEV(s.BodySecondary,{color:e.isDisabled?n.COLORS.text.disabled:n.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:167,columnNumber:5},void 0):i.jsxDEV(s.BodyPrimary,{color:e.isDisabled?n.COLORS.text.disabled:n.COLORS.text.primary,children:e.label},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:176,columnNumber:4},void 0):i.jsxDEV(i.Fragment,{},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:131,columnNumber:11},void 0);return i.jsxDEV(b.CheckboxContainer,{onClick:k,onMouseEnter:()=>d(!e.skipHoverState),onMouseLeave:()=>d(!1),onMouseDown:()=>m(!e.skipHoverState),onMouseUp:()=>m(!1),isDisabled:c,enableHover:e.enableHover,style:e.style??{},children:[i.jsxDEV(b.CheckboxIcon,{checked:o,hovered:h,clicked:f,isDisabled:c,size:e.size,borderColor:e.checkboxBorderColor,children:o&&i.jsxDEV(D,{isPartial:a||!1,isDisabled:c,isSmall:e.size==="SMALL",activeColor:e?.activeColor},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:204,columnNumber:6},void 0)},void 0,!1,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:195,columnNumber:4},void 0),C(),e.rightComponent]},void 0,!0,{fileName:"/Users/syedanoorain/Downloads/bik-component-library/src/components/checkBox/CheckBox.tsx",lineNumber:185,columnNumber:3},void 0)};exports.CheckBox=N;
 //# sourceMappingURL=CheckBox.js.map