npm - @bikdotai/bik-component-library - Versions diffs - 0.0.875 → 0.0.876-beta.1 - Mend

@bikdotai/bik-component-library 0.0.875 → 0.0.876-beta.1

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 (85) hide show

package/dist/esm/components/analytics-chips-and-dropdowns/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":";;;AAIO,MAAMA,IAAyBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU9B,CAACC,MAAUA,EAAM,eAAe;AAAA;AAAA,UAErC,CAACA,MAAWA,EAAM,QAAQA,EAAM,QAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAchDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BG,IAAeH,EAAOI,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhC,CAACJ,MAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyB3BK,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUtB,CAACC,MACjBA,EAAM,aAAa,SAAS,aAAaI,EAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGlD,CAACJ,MACpBA,EAAM,aAAaI,EAAY,SAAS,EAAE,IAAIA,EAAY,UAAU,KAAK;AAAA;AAAA,sBAErD,CAACJ,MACpBA,EAAM,aAAa,KAAKI,EAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGzB,CAACJ,MAAWA,EAAM,cAAc,QAAQ,KAAM;AAAA,4BAC7C,CAACA,MAAWA,EAAM,cAAc,QAAQ,KAAM;AAAA,8BAC5C,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA,+BAC5C,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA,GAG/DM,IAA0BP,EAAO;AAAA,WAGnC,CAACC,MAAWA,EAAM,OAAO,IAAI,CAAE,YAAYO,EAAO,WAAW,IAAI;AAAA;AAAA,GAEzE,CAACP,MACFA,EAAM,OACH;AAAA;AAAA;AAAA,0BAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,GAKhCC,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAO,WAAW,UAAU;AAAA;AAAA;"}
1	+ {"version":3,"file":"CommonStyles.js","sources":["../../../../src/components/analytics-chips-and-dropdowns/CommonStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { BASE_COLORS, COLORS } from '@src/constants/Theme';\nimport { StyledDropdown } from '../floating-action-button';\n\nexport const AnalyticsChipContainer = styled.div<{\n\tbackgroundColor?: string;\n\twidth?: string \| number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 8px;\n\tbackground: ${(props) => props.backgroundColor};\n\tborder-radius: 8px;\n\twidth: ${(props) => (props.width ? props.width : '224.67px')};\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: initial;\n\tmin-height: 88px;\n\t.sub--container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tjustify-content: flex-start;\n\t\tgap: 4px;\n\t\talign-items: baseline;\n\t}\n`;\n\nexport const AnalyticsMultiWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: flex-start;\n\tpadding: 0px;\n\tgap: 16px;\n\tflex-wrap: wrap;\n`;\n\nexport const MainDropdown = styled(StyledDropdown)<{\n\theight?: string;\n\tbgColor?: string;\n}>`\n\t.main--dropdown.dropdown-toggle::after {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.dropdown-toggle::before {\n\t\tdisplay: unset !important;\n\t}\n\t.main--dropdown.btn-primary:hover,\n\t.main--dropdown.btn-primary:active,\n\t.main--dropdown.btn-primary:focus,\n\t.main--dropdown.btn-primary.dropdown-toggle,\n\t.main--dropdown.show > main--dropdown.btn-primary.dropdown-toggle {\n\t\tborder: 1px solid ${BASE_COLORS.grayscale[200]};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tpadding: 6px 8px;\n\t\tgap: 8px;\n\t\tbackground: ${(props) => props.bgColor};\n\t}\n\t.dropdown-menu {\n\t\tborder-radius: 3px;\n\t\tpadding: 0 0;\n\t}\n\t.sub--dropdown.btn-primary {\n\t\twidth: 100%;\n\t\tpadding: 0px;\n\t}\n\t.sub--dropdown {\n\t\tbutton:not(.date-picker-save-button-container button) {\n\t\t\tborder-radius: 0;\n\t\t\tmax-width: 100%;\n\t\t\tpadding: 10px 6.6667px;\n\t\t\tbackground: none;\n\t\t\ttext-align: center;\n\t\t\tline-height: 16px;\n\t\t\tborder: none;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t}\n`;\n\nexport const ItemMenuContainer = styled.div<{\n\tisSelected?: boolean;\n\tisLastItem?: boolean;\n\tisFirstItem?: boolean;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-start;\n\tpadding: 12px 16px;\n\tgap: 4px;\n\tborder-bottom: ${(props) =>\n\t\tprops.isLastItem ? 'none' : `1px solid ${BASE_COLORS.grayscale[200]}`};\n\tmax-width: 240px;\n\tcursor: pointer;\n\tbackground-color: ${(props) =>\n\t\tprops.isSelected ? BASE_COLORS.positive[50] : BASE_COLORS.grayscale.white};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isSelected ? '' : BASE_COLORS.grayscale[50]};\n\t}\n\twidth: 100%;\n\tborder-top-left-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-top-right-radius: ${(props) => (props.isFirstItem ? '4px' : '0px')};\n\tborder-bottom-left-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n\tborder-bottom-right-radius: ${(props) => (props.isLastItem ? '4px' : '0px')};\n`;\n\nexport const AnalyticsTrendContainer = styled.div<{\n\tcard: boolean;\n}>`\n\tborder: ${(props) => (props.card ? 1 : 0)}px solid ${COLORS.background.base};\n\theight: 100%;\n\t${(props) =>\n\t\tprops.card\n\t\t\t? `\n\t\t\tbox-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);\n\t\t\tborder-radius: 8px;\n\t\t\tpadding: 16px 20px;`\n\t\t\t: ''}\n\t.icon--holder {\n\t\theight: 32px;\n\t\twidth: 32px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 5px;\n\t\tcursor: pointer;\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.surface.hovered};\n\t\t}\n\t}\n`;\n\nexport const IconContainer = styled.div`\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 32px;\n\theight: 32px;\n\tbackground-color: ${COLORS.background.brandLight};\n\tborder-radius: 4px;\n`;\n"],"names":["AnalyticsChipContainer","styled","props","AnalyticsMultiWrapper","MainDropdown","StyledDropdown","BASE_COLORS","ItemMenuContainer","AnalyticsTrendContainer","COLORS","IconContainer"],"mappings":";;;AAIO,MAAMA,IAAyBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAU9B,CAACC,MAAUA,EAAM,eAAe;AAAA;AAAA,UAErC,CAACA,MAAWA,EAAM,QAAQA,EAAM,QAAQ,UAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAchDC,IAAwBF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAS/BG,IAAeH,EAAOI,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAe3BC,EAAY,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOhC,CAACJ,MAAUA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAyB3BK,IAAoBN,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAUtB,CAACC,MACjBA,EAAM,aAAa,SAAS,aAAaI,EAAY,UAAU,GAAG,CAAC,EAAE;AAAA;AAAA;AAAA,qBAGlD,CAACJ,MACpBA,EAAM,aAAaI,EAAY,SAAS,EAAE,IAAIA,EAAY,UAAU,KAAK;AAAA;AAAA,sBAErD,CAACJ,MACpBA,EAAM,aAAa,KAAKI,EAAY,UAAU,EAAE,CAAC;AAAA;AAAA;AAAA,2BAGzB,CAACJ,MAAWA,EAAM,cAAc,QAAQ,KAAM;AAAA,4BAC7C,CAACA,MAAWA,EAAM,cAAc,QAAQ,KAAM;AAAA,8BAC5C,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA,+BAC5C,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA,GAG/DM,IAA0BP,EAAO;AAAA,WAGnC,CAACC,MAAWA,EAAM,OAAO,IAAI,CAAE,YAAYO,EAAO,WAAW,IAAI;AAAA;AAAA,GAEzE,CAACP,MACFA,EAAM,OACH;AAAA;AAAA;AAAA,0BAIA,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAUgBO,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA,GAKhCC,IAAgBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMfQ,EAAO,WAAW,UAAU;AAAA;AAAA;"}

package/dist/esm/components/bik-layout/SidebarStyles.js CHANGED Viewed

@@ -264,7 +264,7 @@ const r = t.div`
 		border-bottom: 0.5px solid #e0e0e0;
 		cursor: pointer;
 		max-width: 320px;
-		:hover {
+		&:hover {
 			background-color: ${i.background.base};
 			border-radius: 8px;
 		}

package/dist/esm/components/bik-layout/SidebarStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}
1	+ {"version":3,"file":"SidebarStyles.js","sources":["../../../../src/components/bik-layout/SidebarStyles.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { SidebarTheme } from './Sidebar.model';\n\nexport const SideBarContainer = styled.div`\n\tbackground-color: #28034e;\n\twidth: 88px;\n\tjustify-content: space-between;\n\tposition: sticky;\n\ttop: 0;\n\tleft: 0;\n\tz-index: 10;\n\toverflow-y: auto;\n\theight: 100vh;\n\n\t.bik-header-logo {\n\t\tpadding: 8px 8px 0 8px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 100%;\n\t\tcursor: pointer;\n\t\timg {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tobject-fit: container;\n\t\t}\n\t}\n\n\t.sticky-menu {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 0px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\t.sticky-menu-int {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 64px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.sticky-menu-three {\n\t\t@media (min-height: 768px) {\n\t\t\tposition: absolute;\n\t\t\tbottom: 128px;\n\t\t\twidth: 85%;\n\t\t}\n\t}\n\n\t.new-menu-item {\n\t\tpadding-top: 14px;\n\t}\n`;\n\nexport const MainSideBarMenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n`;\n\nexport const SibeBarMenuItem = styled.div`\n\t.main--sidebar {\n\t\toverflow-y: auto;\n\t\tpadding: 0px 8px;\n\t\tmargin-bottom: 6px;\n\t\t> * {\n\t\t\tgap: 8px;\n\t\t}\n\t}\n\t.locked--channel {\n\t\tposition: absolute;\n\t\tright: 10px;\n\t\tmargin-top: -5px;\n\t}\n\n\t.new-tag {\n\t\tposition: absolute;\n\t\tright: 5px;\n\t\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\t\tfont-size: 7.7px;\n\t\tfont-family: 'Inter';\n\t\tline-height: 10px;\n\t\tpadding: 2px 9.27px 2px 9.27px;\n\t\tborder-radius: 16px 16px 0px 16px;\n\t\tbackground: ${COLORS.background.inverse};\n\t}\n\n\t.tag-sticky {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 116px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\t.tag-sticky-2 {\n\t\t@media (min-height: 768px) {\n\t\t\tbottom: 48px;\n\t\t\tz-index: 1;\n\t\t}\n\t}\n\n\t.sidebar-menu-item {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tborder-radius: 10px;\n\t\talign-items: center;\n\t\tjustify-content: space-around;\n\t\tcursor: pointer;\n\t\t> * {\n\t\t\tgap: 10px;\n\t\t}\n\t\tpadding: 8px;\n\t}\n\n\t.menu-item-container {\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\tcursor: pointer;\n\t\t.menu-item-text {\n\t\t\tfont-family: 'Inter';\n\t\t\tfont-style: normal;\n\t\t\tfont-weight: 400;\n\t\t\tfont-size: 12px;\n\t\t\tline-height: 16px;\n\t\t\tuser-select: none;\n\t\t\tcolor: ${COLORS.content.secondaryInverse};\n\t\t\tmargin-bottom: 0px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.active-menu-item-text {\n\t\t\tcolor: ${COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.main-menu-active-class {\n\t\tborder-radius: 10px;\n\t\tbackground-color: #381062;\n\t\tcolor: ${COLORS.background.warning.vibrant};\n\t}\n\t.sidebar-menu-item-hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n\t.sidebar-menu-item:hover {\n\t\tbackground: #381062;\n\t\tborder-radius: 8px;\n\t}\n`;\n\nexport const SimpleSidebarContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\twidth?: number;\n\tzIndex?: number;\n\tleft?: number;\n\tisNewSidebar?: boolean;\n}>`\n\t.transform-class {\n\t\tposition: relative;\n\t\tanimation: animatebottom 0.5s;\n\t\ttransition-timing-function: ease-in;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\twidth: 88px;\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\n\t\t\twidth: 200px;\n\t\t\topacity: 1;\n\t\t}\n\t}\n\t.sidebar-right-menu {\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : 0)}px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\twidth: ${(props) => (props.width ? props.width : 240)}px;\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 8px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '12px' : '')};\n\t}\n\n\t.sub-child-menu {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '' : '8px')};\n\t\tcursor: pointer;\n\t\t.sub-child-text {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.theme == 'brand' ? COLORS.surface.standard : ''};\n\t\t\tmargin-bottom: 0px;\n\t\t\tpadding: 8px 12px;\n\t\t\twhite-space: nowrap;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\t\t.sub-child-new-tag {\n\t\t\tpadding: 2px 9px 2px 9px;\n\t\t\tborder-radius: 16px;\n\t\t\tbackground-color: rgba(254, 192, 45, 1);\n\t\t\tfont-family: Inter;\n\t\t\tfont-size: 7px;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 10px;\n\t\t\tcolor: rgba(40, 3, 78, 1);\n\t\t}\n\t\t.sub-child-active-text {\n\t\t\tborder-radius: 0px 4px 4px 0px;\n\t\t\twidth: 2px;\n\t\t\theight: 12px;\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : 'white'};\n\t\t}\n\t\t.active-bold-weight {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t\t.sub-child-active-menu-style {\n\t\t\tcolor: ${(props) =>\n\t\t\t\tprops.isNewSidebar ? COLORS.background.warning.vibrant : ''};\n\t\t}\n\t}\n\t.sub-child-menu:hover {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-active-menu {\n\t\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.background.inverseLight\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 8px;\n\t}\n\t.sub-child-display-name {\n\t\tpadding: 14px 12px;\n\t\tcolor: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? COLORS.content.secondaryInverse\n\t\t\t\t: COLORS.text.secondary};\n\t}\n\t.lower-sticky-panel {\n\t\tposition: ${(props) => (props.isNewSidebar ? 'relative' : 'absolute')};\n\t\tbottom: ${(props) => (props.isNewSidebar ? '' : '16px')};\n\t\tmargin-top: ${(props) => (props.isNewSidebar ? 'auto' : '')};\n\t\tmargin-bottom: ${(props) => (props.isNewSidebar ? '16px' : '')};\n\t\t.title-text {\n\t\t\tpadding: 8px 12px;\n\t\t\ttext-align: center;\n\t\t}\n\t\t.upgrade-button {\n\t\t\tmargin: auto;\n\t\t}\n\t}\n\t.sidebar-skeleton {\n\t\tpadding: 8px;\n\t}\n`;\n\nexport const SidebarPopupContainer = styled.div<{\n\tpostion?: 'fixed' \| 'sticky';\n\ttop?: number;\n\ttheme: SidebarTheme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 4px;\n\t\tborder: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);\n\t\tbox-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);\n\t\tposition: ${(props) => (props.postion ? props.postion : 'sticky')};\n\t\ttop: ${(props) => (props.top ? props.top : undefined)}px;\n\t\tbottom: 10px;\n\t\tleft: ${(props) => (props.left ? props.left : 0)}px; //88\n\t\tz-index: ${(props) => (props.zIndex ? props.zIndex : 2)};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.theme == 'brand' ? '#381062' : COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 12px;\n\t\tgap: 4px;\n\t\tmin-height: 100px;\n\t\toverflow-y: auto;\n\t}\n\t.each-menu {\n\t\tpadding: 8px;\n\t\tgap: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tjustify-content: flex-start;\n\t\talign-items: flex-start;\n\t\tborder-bottom: 0.5px solid #e0e0e0;\n\t\tcursor: pointer;\n\t\tmax-width: 320px;\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.background.base};\n\t\t\tborder-radius: 8px;\n\t\t}\n\t}\n`;\n"],"names":["SideBarContainer","styled","MainSideBarMenuWrapper","SibeBarMenuItem","COLORS","SimpleSidebarContainer","props","SidebarPopupContainer"],"mappings":"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"}

package/dist/esm/components/button/Button.styled.js CHANGED Viewed

@@ -86,7 +86,7 @@ const C = r.button`
 	${o(t.buttonType, t.size, e.content.brand)}
 	`}
-	:disabled {
+	&:disabled {
 		.overlay-container {
 			display: none !important;
 		}
@@ -102,7 +102,7 @@ const C = r.button`
 )}
 	}
-	${(t) => !t.disabled && !t.isLoading && `:active {
+	${(t) => !t.disabled && !t.isLoading && `&:active {
 				.button-container {
 					display: flex;
 					${t.matchParentWidth ? "justify-content: center;" : ""}
@@ -175,7 +175,7 @@ const C = r.button`
 					line-height: 0;
 				}
 			}
-		}` : `:not(:active):not(:disabled):hover {
+		}` : `&:not(:active):not(:disabled):hover {
 			padding: 0;
 			.button-container {
 				display: flex;

package/dist/esm/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' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\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.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"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' \| '3.0';\n\tdarkMode?: boolean;\n\tactivated?: boolean;\n\terror?: boolean;\n\tbuttonColor?: string;\n}>`\n\tall: unset;\n\toutline: none;\n\tcursor: pointer;\n\tdisplay: flex;\n\tgap: 8.83px;\n\tborder-radius: ${(props) => (props.buttonType == 'text' ? '0' : '4px')};\n\toverflow: hidden;\n\t${(props) => (props.matchParentWidth ? `flex-grow: 1;` : '')}\n\tbackground-color: ${(props) =>\n\t\tgetBackgroundColor(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.darkMode,\n\t\t\tprops.buttonColor,\n\t\t)};\n\n\t${(props) =>\n\t\tprops.buttonType.startsWith('dash')\n\t\t\t? `.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tborder-radius: 4px;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t}`\n\t\t\t: `padding: ${getPadding(props.buttonType, props.size)};\n\t${getBorder(\n\t\tprops.version ?? '1.0',\n\t\tprops.buttonType,\n\t\tprops.size,\n\t\tprops.inverse,\n\t\tprops.error,\n\t)}`}\n\n\t.icon-component {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.icon-trailing {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t.text {\n\t\tcolor: ${(props) =>\n\t\t\tgetColor(props.buttonType, props.size, props.inverse, props.darkMode)};\n\t}\n\n\t.icon-leading {\n\t\theight: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t\twidth: ${(props) =>\n\t\t\tprops.size === 'chip' \|\| props.size === 'xs' ? '16px' : '20px'};\n\t}\n\n\t${(props) =>\n\t\tgetDashedBorderStyling(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.isLoading\n\t\t\t\t? COLORS.stroke.brandLightAlt\n\t\t\t\t: props.error\n\t\t\t\t? COLORS.stroke.negative.vibrant\n\t\t\t\t: undefined,\n\t\t)}\n\n\t.overlay-container {\n\t\tdisplay: none;\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\tprops.activated &&\n\t\t(props.buttonType == 'dashBold' \|\| props.buttonType == 'dashRegular') &&\n\t\t`\n\t.button-container {\n\t\tdisplay: flex;\n\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\t${`.text {\n\t\t\tcolor: ${COLORS.content.brand} !important;\n\t\t}\n\t\t.icon {\n\t\t\tcolor: ${COLORS.background.brand};\n\t\t}\n\t\t`}\n\t}\n\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t`}\n\n\t&:disabled {\n\t\t.overlay-container {\n\t\t\tdisplay: none !important;\n\t\t}\n\t\tcursor: ${(props) =>\n\t\t\tprops.buttonType === 'text' ? 'auto' : 'not-allowed'};\n\t\t${(props) =>\n\t\t\tgenerateDisabledStyling(props.buttonType, props.size, props.inverse)}\n\t\t.text {\n\t\t\tcolor: ${(props) => getDisabledTextColor(props.inverse)} !important;\n\t\t}\n\t\t${(props) =>\n\t\t\tgetDashedBorderStyling(\n\t\t\t\tprops.buttonType,\n\t\t\t\tprops.size,\n\t\t\t\tCOLORS.stroke.primary,\n\t\t\t)}\n\t}\n\n\t${(props) =>\n\t\t!props.disabled &&\n\t\t!props.isLoading &&\n\t\t`&:active {\n\t\t\t\t.button-container {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\t\tposition: relative;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\t.overlay-container {\n\t\t\t\t\t\tdisplay: none !important;\n\t\t\t\t\t}\n\t\t\t\t\t${\n\t\t\t\t\t\tprops.size === 'chip' &&\n\t\t\t\t\t\t`.text {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight} !important;\n\t\t\t\t\t}\n\t\t\t\t\t.icon {\n\t\t\t\t\t\tcolor: ${COLORS.background.inverseLight};\n\t\t\t\t\t}\n\t\t\t\t\t`\n\t\t\t\t\t}\n\t\t\t\t}\n\n\n\t\t\t${getClickEffect(props.buttonType, props.size, props.inverse)}\n\t\t\t${getDashedBorderStyling(props.buttonType, props.size, COLORS.content.brand)}\n\t\t}`}\n\n\t${(props) =>\n\t\t// do not load hover styles for loading state and also active state\n\t\t!props.isLoading\n\t\t\t? `&:not(:active):not(:disabled):hover {\n\t\t\tpadding: 0;\n\t\t\t.button-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\tposition: relative;\n\t\t\t\twidth: 100%;\n\t\t\t\t${props.matchParentWidth ? 'justify-content: center;' : ''}\n\t\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t\t{${\n\t\t\t\t\tprops.buttonColor\n\t\t\t\t\t\t? `background-color: ${getHoverButtonBackgroundCustom(\n\t\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t\t15,\n\t\t\t\t\t\t )}`\n\t\t\t\t\t\t: ''\n\t\t\t\t}}\n\t\t\t\t.overlay-container {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tposition: absolute;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\ttop: 0;\n\t\t\t\t\tleft: 0;\n\t\t\t\t\twidth: 100%;\n\t\t\t\t\theight: 100%;\n\t\t\t\t\t${getHoverButtonBackground(props.buttonType, props.inverse)}\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.size === 'chip' && props.buttonType !== 'text'\n\t\t\t\t\t\t? props.darkMode\n\t\t\t\t\t\t\t? `background-color: ${COLORS.stroke.primary};`\n\t\t\t\t\t\t\t: `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'special'\n\t\t\t\t\t\t? `background-color: ${COLORS.background.brandLight};`\n\t\t\t\t\t\t: props.buttonType === 'secondaryGray'\n\t\t\t\t\t\t? `background-color: ${COLORS.surface.hovered};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t${\n\t\t\t\t\tprops.buttonType === 'primary' &&\n\t\t\t\t\tprops.size !== 'chip' &&\n\t\t\t\t\tprops.size !== 'xs' &&\n\t\t\t\t\t!props.inverse &&\n\t\t\t\t\t!props.buttonColor\n\t\t\t\t\t\t? `background-color: ${COLORS.background.inverse};`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonType === 'text'\n\t\t\t\t\t? getHoverButtonTextDecorationStyle(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.inverse\n\t\t\t\t\t? generateInverseHoverBackground(props.buttonType, props.disabled)\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t}`\n\t\t\t: `\n\t\t\tcursor: not-allowed;\n\t\t\tpadding: 0;\n\t\t${getLoadingBorder(props.buttonType, props.size, props.inverse)}\n\t\t${getLoadingBackground(\n\t\t\tprops.buttonType,\n\t\t\tprops.size,\n\t\t\tprops.inverse,\n\t\t\tprops.buttonColor,\n\t\t)}\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.icon-leading,\n\t\t\t.icon-component,\n\t\t\t.icon-trailing {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\t${\n\t\t\t\tprops.buttonColor\n\t\t\t\t\t? `background-color: ${getLoadingButtonBackgroundCustom(\n\t\t\t\t\t\t\tprops.buttonColor,\n\t\t\t\t\t\t\t15,\n\t\t\t\t\t )};`\n\t\t\t\t\t: ''\n\t\t\t}\n\t\t\tpadding: ${getPadding(props.buttonType, props.size)};\n\t\t\t.overlay-container {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tposition: absolute;\n\t\t\t\tpadding: 0;\n\t\t\t\ttop: 0;\n\t\t\t\tleft: 0;\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 100%;\n\t\t\t\t${getLoadingBackground(\n\t\t\t\t\tprops.buttonType,\n\t\t\t\t\tprops.size,\n\t\t\t\t\tprops.inverse,\n\t\t\t\t\tprops.buttonColor,\n\t\t\t\t)}\n\t\t\t\t.spinner {\n\t\t\t\t\tline-height: 0;\n\t\t\t\t}\n\t\t\t}\n\t\t}`}\n\n\t\t.button-container {\n\t\tdisplay: flex;\n\t\tgap: 8.33px;\n\t\t${(props) => (props.matchParentWidth ? 'margin: auto;' : '')}\n\t}\n`;\n\nexport const ButtonCustomDashedBorder = () => {\n\treturn (\n\t\t<>\n\t\t\t<div className=\"line-top\"></div>\n\t\t\t<div className=\"line-left\"></div>\n\t\t\t<div className=\"line-bottom\"></div>\n\t\t\t<div className=\"line-right\"></div>\n\t\t</>\n\t);\n};\n"],"names":["Button","styled","props","getBackgroundColor","getPadding","getBorder","getColor","getDashedBorderStyling","COLORS","getClickEffect","generateDisabledStyling","getDisabledTextColor","getLoadingBorder","getLoadingBackground","getLoadingButtonBackgroundCustom","getHoverButtonBackgroundCustom","getHoverButtonBackground","getHoverButtonTextDecorationStyle","generateInverseHoverBackground","ButtonCustomDashedBorder","jsxs","Fragment","jsx"],"mappings":"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"}

package/dist/esm/components/buttonGroup/ButtonGroupStyle.js CHANGED Viewed

@@ -38,7 +38,7 @@ const n = {
 			justify-content: center;
 		}
 	}
-	:hover {
+	&:hover {
 		cursor: pointer;
 	}
 `;

package/dist/esm/components/buttonGroup/ButtonGroupStyle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string \| undefined;\n\tsize: 'small' \| 'medium' \| 'large';\n\tgap: string \| undefined;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width \|\| '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap \|\| '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tsize: 'small' \| 'medium' \| 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":";;AAGA,MAAMA,IAAuB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEMC,IAAoB;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEaC,IAAmBC,EAAO;AAAA;AAAA;AAAA,UAQ7B,CAACC,MAAUA,EAAM,SAAS,MAAM;AAAA,WAC/B,CAACA,MACVA,EAAM,iBAAiB,QACpB,SACAA,EAAM,OACNH,EAAkBG,EAAM,IAAI,IAC5B,MAAM;AAAA,eACI,CAACA,MACdA,EAAM,iBAAiB,QACpBA,EAAM,OACLH,EAAkBG,EAAM,IAAI,IAC5B,SACD,MAAM;AAAA,QACH,CAACA,MAAUA,EAAM,OAAO,MAAM;AAAA,GAGzBC,IAASF,EAAO;AAAA;AAAA,mBASV,CAACC,MAClBA,EAAM,iBAAiB,QACpBA,EAAM,iBAAiB,SACtB,QACA,gBACD,QAAQ;AAAA,SACJ,CAACA,MAAWA,EAAM,mBAAmB,IAAI,OAAQ;AAAA,WAC/C,CAACA,MAAWA,EAAM,iBAAiB,QAAQ,SAAS,MAAO;AAAA,eACvD,CAACA,MAAWA,EAAM,iBAAiB,QAAQ,SAAS,MAAO;AAAA,eAC3D,CAACA,MACdA,EAAM,WAAWE,EAAO,WAAW,aAAaF,EAAM,eAAe;AAAA;AAAA,IAEnE,CAACA,MACFA,EAAM,WAAWE,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,kBACxD,CAACF,MAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGnC,CAACA,MACXA,EAAM,OAAOJ,EAAqBI,EAAM,IAAI,IAAI,UAAU;AAAA,QACpD,CAACA,MACPA,EAAM,gBAAgBA,EAAM,iBAAiB,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"ButtonGroupStyle.js","sources":["../../../../src/components/buttonGroup/ButtonGroupStyle.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst ButtonPaddingMapping = {\n\tsmall: '8px 12px',\n\tmedium: '10px 12px',\n\tlarge: '14px 12px',\n};\n\nconst ButtonSizeMapping = {\n\tsmall: '36px',\n\tmedium: '40px',\n\tlarge: '48px',\n};\n\nexport const ButtonGroupStyle = styled.div<{\n\twidth: string \| undefined;\n\tsize: 'small' \| 'medium' \| 'large';\n\tgap: string \| undefined;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n}>`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: ${(props) => props.width \|\| '100%'};\n\theight: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? 'auto'\n\t\t\t: props.size\n\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t: '36px'};\n\tmin-height: ${(props) =>\n\t\tprops.iconPosition === 'top'\n\t\t\t? props.size\n\t\t\t\t? ButtonSizeMapping[props.size]\n\t\t\t\t: '36px'\n\t\t\t: 'auto'};\n\tgap: ${(props) => props.gap \|\| '12px'};\n`;\n\nexport const Button = styled.div<{\n\tisActive: boolean;\n\tmatchParentWidth: boolean;\n\tborderRadius: string;\n\ticonPosition?: 'left' \| 'right' \| 'top';\n\tsize: 'small' \| 'medium' \| 'large';\n\tbackgroundColor?: string;\n}>`\n\tdisplay: flex;\n\tflex-direction: ${(props) =>\n\t\tprops.iconPosition !== 'top'\n\t\t\t? props.iconPosition === 'left'\n\t\t\t\t? 'row'\n\t\t\t\t: 'row-reverse'\n\t\t\t: 'column'};\n\tflex: ${(props) => (props.matchParentWidth ? 1 : 'unset')};\n\theight: ${(props) => (props.iconPosition === 'top' ? 'auto' : '100%')};\n\tmin-height: ${(props) => (props.iconPosition === 'top' ? '100%' : 'auto')};\n\tbackground: ${(props) =>\n\t\tprops.isActive ? COLORS.background.brandLight : props.backgroundColor};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.isActive ? COLORS.background.inverseLight : COLORS.stroke.primary};\n\tborder-radius: ${(props) => props.borderRadius};\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: ${(props) =>\n\t\tprops.size ? ButtonPaddingMapping[props.size] : '8px 10px'};\n\tgap: ${(props) =>\n\t\tprops.iconPosition && props.iconPosition !== 'top' ? '10px' : '2px'};\n\t.button {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\t&__image {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t}\n\t}\n\t&:hover {\n\t\tcursor: pointer;\n\t}\n`;\n"],"names":["ButtonPaddingMapping","ButtonSizeMapping","ButtonGroupStyle","styled","props","Button","COLORS"],"mappings":";;AAGA,MAAMA,IAAuB;AAAA,EAC5B,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEMC,IAAoB;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACR,GAEaC,IAAmBC,EAAO;AAAA;AAAA;AAAA,UAQ7B,CAACC,MAAUA,EAAM,SAAS,MAAM;AAAA,WAC/B,CAACA,MACVA,EAAM,iBAAiB,QACpB,SACAA,EAAM,OACNH,EAAkBG,EAAM,IAAI,IAC5B,MAAM;AAAA,eACI,CAACA,MACdA,EAAM,iBAAiB,QACpBA,EAAM,OACLH,EAAkBG,EAAM,IAAI,IAC5B,SACD,MAAM;AAAA,QACH,CAACA,MAAUA,EAAM,OAAO,MAAM;AAAA,GAGzBC,IAASF,EAAO;AAAA;AAAA,mBASV,CAACC,MAClBA,EAAM,iBAAiB,QACpBA,EAAM,iBAAiB,SACtB,QACA,gBACD,QAAQ;AAAA,SACJ,CAACA,MAAWA,EAAM,mBAAmB,IAAI,OAAQ;AAAA,WAC/C,CAACA,MAAWA,EAAM,iBAAiB,QAAQ,SAAS,MAAO;AAAA,eACvD,CAACA,MAAWA,EAAM,iBAAiB,QAAQ,SAAS,MAAO;AAAA,eAC3D,CAACA,MACdA,EAAM,WAAWE,EAAO,WAAW,aAAaF,EAAM,eAAe;AAAA;AAAA,IAEnE,CAACA,MACFA,EAAM,WAAWE,EAAO,WAAW,eAAeA,EAAO,OAAO,OAAO;AAAA,kBACxD,CAACF,MAAUA,EAAM,YAAY;AAAA;AAAA;AAAA,YAGnC,CAACA,MACXA,EAAM,OAAOJ,EAAqBI,EAAM,IAAI,IAAI,UAAU;AAAA,QACpD,CAACA,MACPA,EAAM,gBAAgBA,EAAM,iBAAiB,QAAQ,SAAS,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -11,7 +11,7 @@ const o = t.div`
 	background-color: ${(e) => e.selected ? d.background.brandLight : d.surface.subdued};
 	border: 1px solid
 		${(e) => e.selected ? d.content.brand : e.disabled ? d.stroke.primary : d.content.inactive};
-	:hover {
+	&:hover {
 		background-color: ${(e) => e.isTooltipPresent ? d.surface.subdued : e.selected ? d.background.brandLight : e.disabled || e.loading ? d.surface.subdued : d.surface.hovered};
 	}
 `, a = t.div`

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled \|\| props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled \|\| props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWZ,CAACC,MAAWA,EAAM,UAAU,WAAW,YAAa;AAAA,WAC7D,CAACA,MACVA,EAAM,YAAYA,EAAM,UAAU,gBAAgB,SAAS;AAAA,qBACxC,CAACA,MACpBA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,OAAO;AAAA;AAAA,IAEpE,CAACD,MACFA,EAAM,WACHC,EAAO,QAAQ,QACfD,EAAM,WACNC,EAAO,OAAO,UACdA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEP,CAACD,MACpBA,EAAM,mBACHC,EAAO,QAAQ,UACfD,EAAM,WACNC,EAAO,WAAW,aAClBD,EAAM,YAAYA,EAAM,UACxBC,EAAO,QAAQ,UACfA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIfC,IAASH,EAAO;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"CardSelector.styled.js","sources":["../../../../src/components/card-selector/CardSelector.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tselected: boolean;\n\tdisabled: boolean;\n\tloading: boolean;\n\tisTooltipPresent?: boolean;\n}>`\n\twidth: 100%;\n\tdisplay: flex;\n\tpadding: 16px;\n\tborder-radius: 4px;\n\tgap: 12px;\n\tjustify-content: ${(props) => (props.loading ? 'center' : 'flex-start')};\n\tcursor: ${(props) =>\n\t\tprops.disabled \|\| props.loading ? 'not-allowed' : 'pointer'};\n\tbackground-color: ${(props) =>\n\t\tprops.selected ? COLORS.background.brandLight : COLORS.surface.subdued};\n\tborder: 1px solid\n\t\t${(props) =>\n\t\t\tprops.selected\n\t\t\t\t? COLORS.content.brand\n\t\t\t\t: props.disabled\n\t\t\t\t? COLORS.stroke.primary\n\t\t\t\t: COLORS.content.inactive};\n\t&:hover {\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.isTooltipPresent\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: props.selected\n\t\t\t\t? COLORS.background.brandLight\n\t\t\t\t: props.disabled \|\| props.loading\n\t\t\t\t? COLORS.surface.subdued\n\t\t\t\t: COLORS.surface.hovered};\n\t}\n`;\n\nexport const Loader = styled.div`\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n`;\n"],"names":["Container","styled","props","COLORS","Loader"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAWZ,CAACC,MAAWA,EAAM,UAAU,WAAW,YAAa;AAAA,WAC7D,CAACA,MACVA,EAAM,YAAYA,EAAM,UAAU,gBAAgB,SAAS;AAAA,qBACxC,CAACA,MACpBA,EAAM,WAAWC,EAAO,WAAW,aAAaA,EAAO,QAAQ,OAAO;AAAA;AAAA,IAEpE,CAACD,MACFA,EAAM,WACHC,EAAO,QAAQ,QACfD,EAAM,WACNC,EAAO,OAAO,UACdA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEP,CAACD,MACpBA,EAAM,mBACHC,EAAO,QAAQ,UACfD,EAAM,WACNC,EAAO,WAAW,aAClBD,EAAM,YAAYA,EAAM,UACxBC,EAAO,QAAQ,UACfA,EAAO,QAAQ,OAAO;AAAA;AAAA,GAIfC,IAASH,EAAO;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -42,7 +42,7 @@ const d = o.div`
 		box-shadow: 0px 1.5px 6px 0px #0000001f;
 		/* height: 100%; */
-		:hover {
+		&:hover {
 			background: white;
 		}
 	}
@@ -61,7 +61,7 @@ const d = o.div`
 		background-color: white;
 		box-shadow: 0px 1.5px 6px 0px #0000001f;
-		:hover {
+		&:hover {
 			background: white;
 		}
 	}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"CarouselPreview.style.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tshowHeader?: boolean;\n\tremoveBottomBorder?: boolean;\n\tborderRadius?: string;\n\thideBorder?: boolean;\n}>`\n\tbackground-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-top-style: solid;\n\tborder-bottom-style: ${(props) =>\n\t\tprops.removeBottomBorder ? 'unset' : 'solid'};\n\tborder-top-width: 1px;\n\tborder-bottom-width: ${(props) => (props.hideBorder ? '0px' : '1px')};\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tposition: relative;\n\theight: 100%;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '0px'};\n`;\n\nexport const CarouselSlickContainer = styled.div<{\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n}>`\n\twidth: 100%;\n\n\t// Hides the pre-built right arrow\n\t.slick-next:before {\n\t\tcontent: none;\n\t}\n\n\t// Hides the pre-built left arrow\n\t.slick-prev:before {\n\t\tcontent: none;\n\t}\n\n\t// Right arrow styles\n\t.slick-next {\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tright: 10px;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\t\t/* height: 100%; */\n\n\t\t:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// Left arrow styles\n\t.slick-prev {\n\t\tleft: 5px;\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\n\t\t:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t.slick-slide {\n\t\tdisplay: flex;\n\t}\n\n\t.slick-slide > div {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding-bottom: 16px;\n\t}\n\n\t.slick-track {\n\t\tflex: 1;\n\t}\n\n\t.slick-list {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-left: -49px;\n\t}\n`;\n"],"names":["Container","styled","COLORS","props","CarouselSlickContainer"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA,iBAOfC,EAAO,OAAO,OAAO;AAAA;AAAA,wBAEd,CAACC,MACvBA,EAAM,qBAAqB,UAAU,OAAO;AAAA;AAAA,wBAEtB,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOnD,CAACA,MAAUA,EAAM,gBAAgB,KAAK;AAAA,GAG3CC,IAAyBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"CarouselPreview.style.js","sources":["../../../../src/components/carousel-preview/CarouselPreview.style.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{\n\tshowHeader?: boolean;\n\tremoveBottomBorder?: boolean;\n\tborderRadius?: string;\n\thideBorder?: boolean;\n}>`\n\tbackground-image: url('https://firebasestorage.googleapis.com/v0/b/bikayi-chat.appspot.com/o/images-uid%2F341dba50-e84e-4457-b5b5-d9d8a0b95a73?alt=media&token=6fd32f23-8bb2-4980-bbee-bef39b38fd9f');\n\tborder-color: ${COLORS.stroke.primary};\n\tborder-top-style: solid;\n\tborder-bottom-style: ${(props) =>\n\t\tprops.removeBottomBorder ? 'unset' : 'solid'};\n\tborder-top-width: 1px;\n\tborder-bottom-width: ${(props) => (props.hideBorder ? '0px' : '1px')};\n\tbackground-repeat: no-repeat;\n\tbackground-position: center;\n\tbackground-size: cover;\n\tposition: relative;\n\theight: 100%;\n\toverflow-y: auto;\n\tborder-radius: ${(props) => props.borderRadius ?? '0px'};\n`;\n\nexport const CarouselSlickContainer = styled.div<{\n\tcardCount: number;\n\tselectedCarouselIndex: number;\n}>`\n\twidth: 100%;\n\n\t// Hides the pre-built right arrow\n\t.slick-next:before {\n\t\tcontent: none;\n\t}\n\n\t// Hides the pre-built left arrow\n\t.slick-prev:before {\n\t\tcontent: none;\n\t}\n\n\t// Right arrow styles\n\t.slick-next {\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tright: 10px;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\t\t/* height: 100%; */\n\n\t\t&:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t// Left arrow styles\n\t.slick-prev {\n\t\tleft: 5px;\n\t\tz-index: 10;\n\t\tborder-radius: 50%;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tborder-radius: 50%;\n\t\twidth: 24px;\n\t\theight: 24px;\n\t\tdisplay: flex;\n\t\tbackground-color: white;\n\t\tbox-shadow: 0px 1.5px 6px 0px #0000001f;\n\n\t\t&:hover {\n\t\t\tbackground: white;\n\t\t}\n\t}\n\n\t.slick-slide {\n\t\tdisplay: flex;\n\t}\n\n\t.slick-slide > div {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tpadding-bottom: 16px;\n\t}\n\n\t.slick-track {\n\t\tflex: 1;\n\t}\n\n\t.slick-list {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tmargin-left: -49px;\n\t}\n`;\n"],"names":["Container","styled","COLORS","props","CarouselSlickContainer"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA,iBAOfC,EAAO,OAAO,OAAO;AAAA;AAAA,wBAEd,CAACC,MACvBA,EAAM,qBAAqB,UAAU,OAAO;AAAA;AAAA,wBAEtB,CAACA,MAAWA,EAAM,aAAa,QAAQ,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAOnD,CAACA,MAAUA,EAAM,gBAAgB,KAAK;AAAA,GAG3CC,IAAyBH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

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

@@ -7,7 +7,7 @@ const c = r.div`
 	align-items: center;
 	cursor: ${(e) => e.isDisabled ? "default" : "pointer"};
 	${(e) => e.enableHover && i`
-			:hover {
+			&:hover {
 				background: ${o.surface.subdued};
 			}
 		`}

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

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

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

@@ -6,7 +6,7 @@ import { COLORS as r } from "../../../constants/Theme.js";
 import { DropdownPopover as a } from "../DropdownPopover/index.js";
 import { IconButton as s } from "../../icon-button/IconButton.js";
 const m = d.div`
-	:hover {
+	&:hover {
 		background: ${r.surface.subdued};
 	}
 	position: ${(o) => o.isNewTag ? "relative" : ""};

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

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/dropdown/MenuItem/MenuItem.tsx"],"sourcesContent":["import HorizontalMoreIcon from '@src/assets/icons/horizontal_dots.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { COLORS } from '../../../constants/Theme';\nimport { DropdownPopover } from '../DropdownPopover';\nimport { OpenDropdownProps } from '../type';\n\nexport type MenuItemDropdownProps = OpenDropdownProps & {\n\tisHorizontal: boolean;\n\tchildren?: React.ReactNode;\n\thideBorder?: boolean;\n\tisNewTag?: boolean;\n};\n\nconst MenuItemDropdownStyle = styled.div<{ isNewTag?: boolean }>`\n\t:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\tposition: ${(props) => (props.isNewTag ? 'relative' : '')};\n\t.new--tag {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -8px;\n\t\ttop: -5px;\n\t\tborder-radius: 50%;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1.25px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n`;\n\nexport const MenuItemDropdown: React.FC<MenuItemDropdownProps> = (props) => {\n\treturn (\n\t\t<MenuItemDropdownStyle isNewTag={props.isNewTag}>\n\t\t\t<DropdownPopover {...props}>\n\t\t\t\t<div>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={props.isHorizontal ? HorizontalMoreIcon : MoreIcon}\n\t\t\t\t\t\tbordered={!props?.hideBorder}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{props.isNewTag ? <div className=\"new--tag\"></div> : null}\n\t\t\t</DropdownPopover>\n\t\t</MenuItemDropdownStyle>\n\t);\n};\n\nMenuItemDropdown.displayName = 'MenuItemDropdown';\n"],"names":["MenuItemDropdownStyle","styled","COLORS","props","MenuItemDropdown","jsx","jsxs","DropdownPopover","IconButton","HorizontalMoreIcon","MoreIcon"],"mappings":";;;;;;;AAgBA,MAAMA,IAAwBC,EAAO;AAAA;AAAA,gBAErBC,EAAO,QAAQ,OAAO;AAAA;AAAA,aAEzB,CAACC,MAAWA,EAAM,WAAW,aAAa,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1CD,EAAO,WAAW,SAAS,OAAO;AAAA,yBACzBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnCE,IAAoD,CAACD,MAEhE,gBAAAE,EAACL,KAAsB,UAAUG,EAAM,UACtC,UAAA,gBAAAG,EAACC,GAAA,EAAiB,GAAGJ,GACpB,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EACA,UAAA,gBAAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACA,MAAML,EAAM,eAAeM,IAAqBC;AAAAA,MAChD,UAAU,CAACP,GAAO;AAAA,IAAA;AAAA,EAAA,GAEpB;AAAA,EACCA,EAAM,WAAW,gBAAAE,EAAC,OAAA,EAAI,WAAU,YAAW,IAAS;AAAA,EAAA,CACtD,EAAA,CACD;AAIFD,EAAiB,cAAc;"}
1	+ {"version":3,"file":"MenuItem.js","sources":["../../../../../src/components/dropdown/MenuItem/MenuItem.tsx"],"sourcesContent":["import HorizontalMoreIcon from '@src/assets/icons/horizontal_dots.svg';\nimport MoreIcon from '@src/assets/icons/vertical_dots.svg';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '@src/components/icon-button';\nimport { COLORS } from '../../../constants/Theme';\nimport { DropdownPopover } from '../DropdownPopover';\nimport { OpenDropdownProps } from '../type';\n\nexport type MenuItemDropdownProps = OpenDropdownProps & {\n\tisHorizontal: boolean;\n\tchildren?: React.ReactNode;\n\thideBorder?: boolean;\n\tisNewTag?: boolean;\n};\n\nconst MenuItemDropdownStyle = styled.div<{ isNewTag?: boolean }>`\n\t&:hover {\n\t\tbackground: ${COLORS.surface.subdued};\n\t}\n\tposition: ${(props) => (props.isNewTag ? 'relative' : '')};\n\t.new--tag {\n\t\tbox-sizing: border-box;\n\t\tposition: absolute;\n\t\tright: -8px;\n\t\ttop: -5px;\n\t\tborder-radius: 50%;\n\t\twidth: 14px;\n\t\theight: 14px;\n\t\tbackground: ${COLORS.background.negative.vibrant};\n\t\tborder: 1.25px solid ${COLORS.surface.standard};\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n`;\n\nexport const MenuItemDropdown: React.FC<MenuItemDropdownProps> = (props) => {\n\treturn (\n\t\t<MenuItemDropdownStyle isNewTag={props.isNewTag}>\n\t\t\t<DropdownPopover {...props}>\n\t\t\t\t<div>\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\tIcon={props.isHorizontal ? HorizontalMoreIcon : MoreIcon}\n\t\t\t\t\t\tbordered={!props?.hideBorder}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t\t{props.isNewTag ? <div className=\"new--tag\"></div> : null}\n\t\t\t</DropdownPopover>\n\t\t</MenuItemDropdownStyle>\n\t);\n};\n\nMenuItemDropdown.displayName = 'MenuItemDropdown';\n"],"names":["MenuItemDropdownStyle","styled","COLORS","props","MenuItemDropdown","jsx","jsxs","DropdownPopover","IconButton","HorizontalMoreIcon","MoreIcon"],"mappings":";;;;;;;AAgBA,MAAMA,IAAwBC,EAAO;AAAA;AAAA,gBAErBC,EAAO,QAAQ,OAAO;AAAA;AAAA,aAEzB,CAACC,MAAWA,EAAM,WAAW,aAAa,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAS1CD,EAAO,WAAW,SAAS,OAAO;AAAA,yBACzBA,EAAO,QAAQ,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnCE,IAAoD,CAACD,MAEhE,gBAAAE,EAACL,KAAsB,UAAUG,EAAM,UACtC,UAAA,gBAAAG,EAACC,GAAA,EAAiB,GAAGJ,GACpB,UAAA;AAAA,EAAA,gBAAAE,EAAC,OAAA,EACA,UAAA,gBAAAA;AAAA,IAACG;AAAA,IAAA;AAAA,MACA,MAAML,EAAM,eAAeM,IAAqBC;AAAAA,MAChD,UAAU,CAACP,GAAO;AAAA,IAAA;AAAA,EAAA,GAEpB;AAAA,EACCA,EAAM,WAAW,gBAAAE,EAAC,OAAA,EAAI,WAAU,YAAW,IAAS;AAAA,EAAA,CACtD,EAAA,CACD;AAIFD,EAAiB,cAAc;"}

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js CHANGED Viewed

@@ -19,10 +19,10 @@ const t = n.div`
 	background: transparent;
 	${(e) => e.disabled ? "" : `
-		:hover {
+		&:hover {
 			background-color: ${i.background.inverse};
 		}
-		:active {
+		&:active {
 			box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);
 		}
 	`}

package/dist/esm/components/dual-icon-button/DualIconButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DualIconButton.styled.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{ disabled?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbackground: ${(props) =>\n\t\tprops.disabled\n\t\t\t? COLORS.background.inactive\n\t\t\t: COLORS.background.inverseLight};\n`;\n\nexport const IconHalf = styled.button<{ disabled?: boolean }>`\n\tall: unset;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tpadding: 4px;\n\tbox-sizing: border-box;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tbackground: transparent;\n\n\t${(props) =>\n\t\t!props.disabled\n\t\t\t? `\n\t\t:hover {\n\t\t\tbackground-color: ${COLORS.background.inverse};\n\t\t}\n\t\t:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const Divider = styled.div`\n\twidth: 1px;\n\theight: 12px;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tflex-shrink: 0;\n`;\n"],"names":["Container","styled","props","COLORS","IconHalf","Divider"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,CAACC,MACdA,EAAM,WACHC,EAAO,WAAW,WAClBA,EAAO,WAAW,YAAY;AAAA,GAGtBC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASpB,CAACC,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,GAG/D,CAACA,MACDA,EAAM,WASJ,KARA;AAAA;AAAA,uBAEkBC,EAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AAAA,GAGME,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
1	+ {"version":3,"file":"DualIconButton.styled.js","sources":["../../../../src/components/dual-icon-button/DualIconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport const Container = styled.div<{ disabled?: boolean }>`\n\tdisplay: inline-flex;\n\talign-items: center;\n\tborder-radius: 4px;\n\toverflow: hidden;\n\tbackground: ${(props) =>\n\t\tprops.disabled\n\t\t\t? COLORS.background.inactive\n\t\t\t: COLORS.background.inverseLight};\n`;\n\nexport const IconHalf = styled.button<{ disabled?: boolean }>`\n\tall: unset;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 24px;\n\theight: 24px;\n\tpadding: 4px;\n\tbox-sizing: border-box;\n\tcursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n\tbackground: transparent;\n\n\t${(props) =>\n\t\t!props.disabled\n\t\t\t? `\n\t\t&:hover {\n\t\t\tbackground-color: ${COLORS.background.inverse};\n\t\t}\n\t\t&:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`\n\t\t\t: ''}\n`;\n\nexport const Divider = styled.div`\n\twidth: 1px;\n\theight: 12px;\n\tbackground: rgba(255, 255, 255, 0.3);\n\tflex-shrink: 0;\n`;\n"],"names":["Container","styled","props","COLORS","IconHalf","Divider"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjB,CAACC,MACdA,EAAM,WACHC,EAAO,WAAW,WAClBA,EAAO,WAAW,YAAY;AAAA,GAGtBC,IAAWH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASpB,CAACC,MAAWA,EAAM,WAAW,gBAAgB,SAAU;AAAA;AAAA;AAAA,GAG/D,CAACA,MACDA,EAAM,WASJ,KARA;AAAA;AAAA,uBAEkBC,EAAO,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAMzC;AAAA,GAGME,IAAUJ,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js CHANGED Viewed

@@ -32,7 +32,7 @@ const c = e.div`
 			padding: 14px;
 			border-bottom: 1px solid ${o.stroke.primary};
-			:last-child {
+			&:last-child {
 				border-bottom: none !important;
 			}
 		}

package/dist/esm/components/floating-action-button/FloatingActionButton.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FloatingActionButton.styles.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.styles.ts"],"sourcesContent":["import { Dropdown } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum FAB_POSITION {\n\tTOP_LEFT = 'top left',\n\tTOP_RIGHT = 'top right',\n\tBOTTOM_LEFT = 'bottom left',\n\tBOTTOM_RIGHT = 'botton right',\n}\n\nexport enum DROP_POSITION {\n\tUP = 'up',\n\tUP_CENTERED = 'up-centered',\n\tSTART = 'start',\n\tEND = 'end',\n\tDOWN = 'down',\n\tDOWN_CENTERED = 'down-centered',\n}\n\nexport enum MENU_ALIGNMENT {\n\tSTART = 'start',\n\tEND = 'end',\n}\n\nexport const FloatingActionButtonContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tisRound?: boolean;\n}>`\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tbackground: ${(props) => props.color};\n\t${(props) =>\n\t\tprops.isRound\n\t\t\t? 'border-radius: 50%;'\n\t\t\t: 'border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;'}\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: flex;\n`;\nexport const FloatingActionButtonOuterContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tposition: FAB_POSITION;\n\tbuttonPaddingHorizontal: number;\n\tbuttonPaddingVertical: number;\n\tzIndex: number;\n}>`\n\tdisplay: flex;\n\tborder-radius: 50%;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tposition: fixed;\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tz-index: ${(props) => props.zIndex};\n\t${(props) =>\n\t\tprops.position === FAB_POSITION.BOTTOM_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.BOTTOM_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: ``};\n`;\n\nexport const StyledDropdown = styled(Dropdown)<{\n\tactive?: string;\n\twidth?: string;\n\theight?: string;\n}>`\n\t.filter-container {\n\t\t.single-row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-start;\n\t\t\tgap: 8px;\n\t\t\tpadding: 14px;\n\t\t\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\n\t\t\t:last-child {\n\t\t\t\tborder-bottom: none !important;\n\t\t\t}\n\t\t}\n\t}\n\tbutton:not(.date-picker-save-button-container button) {\n\t\tborder: 1px solid\n\t\t\t${(props) =>\n\t\t\t\tprops.active === 'true'\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 6px 0px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.standard};\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t}\n\n\t.btn-primary:hover,\n\t.btn-primary:active,\n\t.btn-primary:focus,\n\t.btn-primary.dropdown-toggle,\n\t.show > .btn-primary.dropdown-toggle {\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: 'transparent'};\n\t\tborder: none;\n\t}\n\t.btn:focus {\n\t\toutline: 0;\n\t\tbox-shadow: 0 0 0 0.25rem transparent !important;\n\t}\n\n\t.dropdown-toggle::after {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\n\t.dropdown-toggle::before {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\t.dropdown-menu {\n\t\tmin-width: 12rem;\n\t\tpadding: 0 0;\n\t}\n\t.dropdown-item:active,\n\t.dropdown-item:hover {\n\t\tcolor: ${COLORS.content.positive};\n\t\ttext-decoration: none;\n\t\tbackground-color: ${COLORS.background.positive.light};\n\t}\n`;\n\nexport const DropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nexport const TooltipStyled = styled.div<{ tooltipWidth?: number }>`\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.content.primary};\n\tcolor: ${COLORS.content.primaryInverse};\n\twidth: ${(props) =>\n\t\tprops.tooltipWidth ? props.tooltipWidth + 'px' : '120px'};\n`;\n"],"names":["FAB_POSITION","DROP_POSITION","MENU_ALIGNMENT","FloatingActionButtonContainer","styled","props","FloatingActionButtonOuterContainer","StyledDropdown","Dropdown","COLORS","DropdownToggleContainer","TooltipStyled"],"mappings":";;;AAIO,IAAKA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,eAAe,gBAJJA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,cAAc,eACdA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,gBAAgB,iBANLA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAFKA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAgCC,EAAO;AAAA,UAM1C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,eACnB,CAACA,MAAUA,EAAM,KAAK;AAAA,GAClC,CAACA,MACFA,EAAM,UACH,wBACA,8FAA8F;AAAA;AAAA;AAAA;AAAA;AAAA,GAMtFC,IAAqCF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc/C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,YACtB,CAACA,MAAUA,EAAM,MAAM;AAAA,GAChC,CAACA,MACFA,EAAM,aAAa,iBAChB,UAAUA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OACjFA,EAAM,aAAa,gBACnB,SAASA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OAChFA,EAAM,aAAa,aACnB,SAASA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC7EA,EAAM,aAAa,cACnB,UAAUA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC9E,EAAE;AAAA,GAGME,IAAiBH,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAafC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAS9C,CAACJ,MACFA,EAAM,WAAW,SACdI,EAAO,OAAO,SAAS,WACvBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOZ,CAACJ,MACdA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3BA,EAAO,QAAQ,QAAQ;AAAA,WAClB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQjB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA,sBACN,CAACJ,MACpBA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASSA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASvCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEZA,EAAO,WAAW,SAAS,KAAK;AAAA;AAAA,GAIzCC,IAA0BN,EAAOI,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhDG,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIfK,EAAO,QAAQ,OAAO;AAAA,UACjCA,EAAO,QAAQ,cAAc;AAAA,UAC7B,CAACJ,MACTA,EAAM,eAAeA,EAAM,eAAe,OAAO,OAAO;AAAA;"}
1	+ {"version":3,"file":"FloatingActionButton.styles.js","sources":["../../../../src/components/floating-action-button/FloatingActionButton.styles.ts"],"sourcesContent":["import { Dropdown } from 'react-bootstrap';\nimport styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nexport enum FAB_POSITION {\n\tTOP_LEFT = 'top left',\n\tTOP_RIGHT = 'top right',\n\tBOTTOM_LEFT = 'bottom left',\n\tBOTTOM_RIGHT = 'botton right',\n}\n\nexport enum DROP_POSITION {\n\tUP = 'up',\n\tUP_CENTERED = 'up-centered',\n\tSTART = 'start',\n\tEND = 'end',\n\tDOWN = 'down',\n\tDOWN_CENTERED = 'down-centered',\n}\n\nexport enum MENU_ALIGNMENT {\n\tSTART = 'start',\n\tEND = 'end',\n}\n\nexport const FloatingActionButtonContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tisRound?: boolean;\n}>`\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tbackground: ${(props) => props.color};\n\t${(props) =>\n\t\tprops.isRound\n\t\t\t? 'border-radius: 50%;'\n\t\t\t: 'border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; border-top-left-radius:50%;'}\n\tjustify-content: center;\n\talign-items: center;\n\tcursor: pointer;\n\tdisplay: flex;\n`;\nexport const FloatingActionButtonOuterContainer = styled.div<{\n\twidth: number;\n\theight: number;\n\tcolor: string;\n\tposition: FAB_POSITION;\n\tbuttonPaddingHorizontal: number;\n\tbuttonPaddingVertical: number;\n\tzIndex: number;\n}>`\n\tdisplay: flex;\n\tborder-radius: 50%;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tposition: fixed;\n\twidth: ${(props) => props.width}px;\n\theight: ${(props) => props.height}px;\n\tz-index: ${(props) => props.zIndex};\n\t${(props) =>\n\t\tprops.position === FAB_POSITION.BOTTOM_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.BOTTOM_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; bottom: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_LEFT\n\t\t\t? `left: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: props.position === FAB_POSITION.TOP_RIGHT\n\t\t\t? `right: ${props.buttonPaddingHorizontal}px; top: ${props.buttonPaddingVertical}px`\n\t\t\t: ``};\n`;\n\nexport const StyledDropdown = styled(Dropdown)<{\n\tactive?: string;\n\twidth?: string;\n\theight?: string;\n}>`\n\t.filter-container {\n\t\t.single-row {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: row;\n\t\t\talign-items: center;\n\t\t\tjustify-content: flex-start;\n\t\t\tgap: 8px;\n\t\t\tpadding: 14px;\n\t\t\tborder-bottom: 1px solid ${COLORS.stroke.primary};\n\n\t\t\t&:last-child {\n\t\t\t\tborder-bottom: none !important;\n\t\t\t}\n\t\t}\n\t}\n\tbutton:not(.date-picker-save-button-container button) {\n\t\tborder: 1px solid\n\t\t\t${(props) =>\n\t\t\t\tprops.active === 'true'\n\t\t\t\t\t? COLORS.stroke.positive.lightAlt\n\t\t\t\t\t: COLORS.stroke.primary};\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\tflex-direction: row;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 6px 0px;\n\t\tbackground: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: COLORS.surface.standard};\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t}\n\n\t.btn-primary:hover,\n\t.btn-primary:active,\n\t.btn-primary:focus,\n\t.btn-primary.dropdown-toggle,\n\t.show > .btn-primary.dropdown-toggle {\n\t\tcolor: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.content.positive\n\t\t\t\t: COLORS.content.primary};\n\t\tbackground-color: ${(props) =>\n\t\t\tprops.active === 'true'\n\t\t\t\t? COLORS.background.positive.light\n\t\t\t\t: 'transparent'};\n\t\tborder: none;\n\t}\n\t.btn:focus {\n\t\toutline: 0;\n\t\tbox-shadow: 0 0 0 0.25rem transparent !important;\n\t}\n\n\t.dropdown-toggle::after {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\n\t.dropdown-toggle::before {\n\t\tborder-top: 0.3em solid ${COLORS.content.primary};\n\t\tdisplay: none !important;\n\t}\n\t.dropdown-menu {\n\t\tmin-width: 12rem;\n\t\tpadding: 0 0;\n\t}\n\t.dropdown-item:active,\n\t.dropdown-item:hover {\n\t\tcolor: ${COLORS.content.positive};\n\t\ttext-decoration: none;\n\t\tbackground-color: ${COLORS.background.positive.light};\n\t}\n`;\n\nexport const DropdownToggleContainer = styled(Dropdown.Toggle)`\n\tborder-radius: 4px;\n\tdisplay: flex;\n\tflex-direction: row;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 6px 8px;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n`;\n\nexport const TooltipStyled = styled.div<{ tooltipWidth?: number }>`\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\tborder-radius: 4px;\n\tpadding: 8px;\n\tbackground-color: ${COLORS.content.primary};\n\tcolor: ${COLORS.content.primaryInverse};\n\twidth: ${(props) =>\n\t\tprops.tooltipWidth ? props.tooltipWidth + 'px' : '120px'};\n`;\n"],"names":["FAB_POSITION","DROP_POSITION","MENU_ALIGNMENT","FloatingActionButtonContainer","styled","props","FloatingActionButtonOuterContainer","StyledDropdown","Dropdown","COLORS","DropdownToggleContainer","TooltipStyled"],"mappings":";;;AAIO,IAAKA,sBAAAA,OACXA,EAAA,WAAW,YACXA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,eAAe,gBAJJA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACXA,EAAA,KAAK,MACLA,EAAA,cAAc,eACdA,EAAA,QAAQ,SACRA,EAAA,MAAM,OACNA,EAAA,OAAO,QACPA,EAAA,gBAAgB,iBANLA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACXA,EAAA,QAAQ,SACRA,EAAA,MAAM,OAFKA,IAAAA,KAAA,CAAA,CAAA;AAKL,MAAMC,IAAgCC,EAAO;AAAA,UAM1C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,eACnB,CAACA,MAAUA,EAAM,KAAK;AAAA,GAClC,CAACA,MACFA,EAAM,UACH,wBACA,8FAA8F;AAAA;AAAA;AAAA;AAAA;AAAA,GAMtFC,IAAqCF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAc/C,CAACC,MAAUA,EAAM,KAAK;AAAA,WACrB,CAACA,MAAUA,EAAM,MAAM;AAAA,YACtB,CAACA,MAAUA,EAAM,MAAM;AAAA,GAChC,CAACA,MACFA,EAAM,aAAa,iBAChB,UAAUA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OACjFA,EAAM,aAAa,gBACnB,SAASA,EAAM,uBAAuB,eAAeA,EAAM,qBAAqB,OAChFA,EAAM,aAAa,aACnB,SAASA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC7EA,EAAM,aAAa,cACnB,UAAUA,EAAM,uBAAuB,YAAYA,EAAM,qBAAqB,OAC9E,EAAE;AAAA,GAGME,IAAiBH,EAAOI,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAafC,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAS9C,CAACJ,MACFA,EAAM,WAAW,SACdI,EAAO,OAAO,SAAS,WACvBA,EAAO,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOZ,CAACJ,MACdA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3BA,EAAO,QAAQ,QAAQ;AAAA,WAClB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAQjB,CAACJ,MACTA,EAAM,WAAW,SACdI,EAAO,QAAQ,WACfA,EAAO,QAAQ,OAAO;AAAA,sBACN,CAACJ,MACpBA,EAAM,WAAW,SACdI,EAAO,WAAW,SAAS,QAC3B,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BASSA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKtBA,EAAO,QAAQ,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASvCA,EAAO,QAAQ,QAAQ;AAAA;AAAA,sBAEZA,EAAO,WAAW,SAAS,KAAK;AAAA;AAAA,GAIzCC,IAA0BN,EAAOI,EAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAYhDG,IAAgBP,EAAO;AAAA;AAAA;AAAA;AAAA,qBAIfK,EAAO,QAAQ,OAAO;AAAA,UACjCA,EAAO,QAAQ,cAAc;AAAA,UAC7B,CAACJ,MACTA,EAAM,eAAeA,EAAM,eAAe,OAAO,OAAO;AAAA;"}

package/dist/esm/components/icon-button/IconButton.styled.js CHANGED Viewed

@@ -11,17 +11,17 @@ const c = a.button`
 	${o.bordered && o.iconButtonType !== "ai" && o.iconButtonType !== "primary" ? `border: 1px solid ${r.stroke.primary};` : ""}
 	${o.iconButtonType === "primary" ? `
 				background: ${n("primary")};
-				${o.isSelected ? "" : `:hover { background-color: ${r.background.inverse}; }`}
-				:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
+				${o.isSelected ? "" : `&:hover { background-color: ${r.background.inverse}; }`}
+				&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }
 			` : o.isSelected ? `background: ${n(o.iconButtonType)};` : `
-				:hover {
+				&:hover {
 					background-color: rgba(0, 0, 0, 0.03);
 				}
 			`}
 	${o.disabled ? o.iconButtonType === "primary" ? `
 					cursor: not-allowed !important;
 					background-color: ${r.background.inactive};
-					:hover { background-color: ${r.background.inactive}; }
+					&:hover { background-color: ${r.background.inactive}; }
 				` : `
 					cursor: not-allowed !important;
 					background-color: rgba(0, 0, 0, 0.03);

package/dist/esm/components/icon-button/IconButton.styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAO9B,CAACC,MAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,gBAAgB,SACnBA,EAAM,cACNA,EAAM,SAAS,OACf,IACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,YACNA,EAAM,mBAAmB,QACzBA,EAAM,mBAAmB,YACtB,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,mBAAmB,YACtB;AAAA,kBACaE,EAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,aAEJ,KADA,~~8BAA8BC,~~EAAO,WAAW,OAAO,~~KAE3D~~;AAAA;AAAA,OAGCD,EAAM,aACN,eAAeE,EAAwBF,EAAM,cAAc,CAAC,MAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,WACHA,EAAM,mBAAmB,YACxB;AAAA;AAAA,yBAEmBC,EAAO,WAAW,QAAQ;AAAA,~~kCACjBA~~,EAAO,WAAW,QAAQ;AAAA,~~QAEtD~~;AAAA;AAAA;AAAA,QAID,EACJ;AAAA;AAAA,EAEC;AAAA;"}
1	+ {"version":3,"file":"IconButton.styled.js","sources":["../../../../src/components/icon-button/IconButton.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\nimport { IconButtonSize, IconButtonType } from './model';\nimport { generateBackgroundColor } from './theme';\n\nexport const IconButton = styled.button<{\n\tbordered?: boolean;\n\ticonButtonType: IconButtonType;\n\tisSelected?: boolean;\n\ticonPadding?: number;\n\tsize?: IconButtonSize;\n}>`\n\t${(props) => `\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${\n\t\tprops.iconPadding !== undefined\n\t\t\t? props.iconPadding\n\t\t\t: props.size === 'xs'\n\t\t\t? 4\n\t\t\t: 6\n\t}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${\n\t\tprops.bordered &&\n\t\tprops.iconButtonType !== 'ai' &&\n\t\tprops.iconButtonType !== 'primary'\n\t\t\t? `border: 1px solid ${COLORS.stroke.primary};`\n\t\t\t: ''\n\t}\n\t${\n\t\tprops.iconButtonType === 'primary'\n\t\t\t? `\n\t\t\t\tbackground: ${generateBackgroundColor('primary')};\n\t\t\t\t${\n\t\t\t\t\t!props.isSelected\n\t\t\t\t\t\t? `&:hover { background-color: ${COLORS.background.inverse}; }`\n\t\t\t\t\t\t: ''\n\t\t\t\t}\n\t\t\t\t&:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`\n\t\t\t: props.isSelected\n\t\t\t? `background: ${generateBackgroundColor(props.iconButtonType)};`\n\t\t\t: `\n\t\t\t\t&:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t`\n\t}\n\t${\n\t\tprops.disabled\n\t\t\t? props.iconButtonType === 'primary'\n\t\t\t\t? `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${COLORS.background.inactive};\n\t\t\t\t\t&:hover { background-color: ${COLORS.background.inactive}; }\n\t\t\t\t`\n\t\t\t\t: `\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t`\n\t\t\t: ''\n\t}\n\n\t`}\n`;\n"],"names":["IconButton","styled","props","COLORS","generateBackgroundColor"],"mappings":";;;AAKO,MAAMA,IAAaC,EAAO;AAAA,GAO9B,CAACC,MAAU;AAAA;AAAA;AAAA,YAIZA,EAAM,gBAAgB,SACnBA,EAAM,cACNA,EAAM,SAAS,OACf,IACA,CACJ;AAAA;AAAA;AAAA,GAICA,EAAM,YACNA,EAAM,mBAAmB,QACzBA,EAAM,mBAAmB,YACtB,qBAAqBC,EAAO,OAAO,OAAO,MAC1C,EACJ;AAAA,GAECD,EAAM,mBAAmB,YACtB;AAAA,kBACaE,EAAwB,SAAS,CAAC;AAAA,MAE9CF,EAAM,aAEJ,KADA,+BAA+BC,EAAO,WAAW,OAAO,KAE5D;AAAA;AAAA,OAGCD,EAAM,aACN,eAAeE,EAAwBF,EAAM,cAAc,CAAC,MAC5D;AAAA;AAAA;AAAA;AAAA,IAKJ;AAAA,GAECA,EAAM,WACHA,EAAM,mBAAmB,YACxB;AAAA;AAAA,yBAEmBC,EAAO,WAAW,QAAQ;AAAA,mCAChBA,EAAO,WAAW,QAAQ;AAAA,QAEvD;AAAA;AAAA;AAAA,QAID,EACJ;AAAA;AAAA,EAEC;AAAA;"}

package/dist/esm/components/plans/SubscriptionPlanSelector.js CHANGED Viewed

@@ -70,7 +70,7 @@ const C = r.div`
 	.input--class {
 		border: none;
 		:active,
-		:focus {
+		&:focus {
 			border: none;
 			outline: none;
 		}

package/dist/esm/components/plans/SubscriptionPlanSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { stripHtmlTags } from '@src/helpers/sanitize';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst sanitized = stripHtmlTags(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(sanitized);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsanitized,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\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</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\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\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","sanitized","stripHtmlTags","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}
1	+ {"version":3,"file":"SubscriptionPlanSelector.js","sources":["../../../../src/components/plans/SubscriptionPlanSelector.tsx"],"sourcesContent":["import Check from '@src/assets/icons/check.svg';\nimport Info from '@src/assets/icons/info.svg';\nimport PhoneIcon from '@src/assets/icons/phone.svg';\nimport { stripHtmlTags } from '@src/helpers/sanitize';\nimport { FunctionComponent, useState } from 'react';\nimport styled from 'styled-components';\nimport { StyledModal } from '@src/components/modals';\nimport {\n\tSubscriptionPlan,\n\tSubscriptionPlanProps,\n} from '@src/components/plans/SubscriptionPlan';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../button';\nimport { Tabs } from '../tabs';\nimport { TabViewHeaderProps } from '../tabs/Tabs.model';\nimport { BodyCaption, BodyPrimary, TitleMedium } from '../TypographyStyle';\n\ntype Props = {\n\tplans: SubscriptionPlanProps[];\n\tonPlanSelect: (code: string) => void;\n\tonClose: () => void;\n\tsubHeader?: string;\n\twarningDescription?: string;\n\tshowTrialOptions?: boolean;\n\theader?: string;\n\tshowMonthlyOptions?: boolean;\n\tshowMonthlyTabs?: boolean;\n\tstaticWidthMultiplier?: number;\n\ttabProperties?: TabViewHeaderProps;\n\tshowCouponApplicationCode?: boolean;\n\tdiscountInputProperties?: {\n\t\terrorMessage?: string;\n\t\tsuccessText?: string;\n\t\tdefaultValue?: string;\n\t\tshowRemoveCoupon?: boolean;\n\t\tonChangeText: (text: string) => void;\n\t\tremoveCoupon?: () => void;\n\t\tonCouponApply?: () => void;\n\t\tisLoading?: boolean;\n\t};\n\tshowBookAdemo?: boolean;\n\tdemoLink?: string;\n\tonClickingBookADemo?: () => void;\n};\n\nconst PlanWrapper = styled.div`\n\tdisplay: flex;\n\tcolumn-gap: 22px;\n\talign-items: stretch;\n\tpadding: 24px;\n`;\n\nconst Warning = styled.div`\n\tcolor: ${COLORS.content.negative};\n\tpadding: 0px 24px;\n`;\nexport const HeaderWrapper = styled.div`\n\tpadding: 24px 24px 0px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\t.sub--header {\n\t\tmargin-top: 8px;\n\t\tcolor: ${COLORS.content.secondary} !important;\n\t}\n`;\nexport const BottomWrapper = styled.div`\n\tpadding: 0px 24px 24px 24px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tflex-wrap: wrap;\n\tgap: 8px;\n\t.coupon-code {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n\t.coupon--success--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: 4px 8px;\n\t\tborder-radius: 4px;\n\t\tborder: 1px solid #c3e4c4;\n\t\tbackground: #e6f4e7;\n\t}\n\t.coupon-input {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: 8px;\n\t}\n\t.dotted--border {\n\t\tborder: 1px dotted #e0e0e0;\n\t\tpadding: 8px 8px 8px 16px;\n\t\tmin-width: 10%;\n\t\tborder-radius: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\t.error--border {\n\t\tborder: 1px dotted ${COLORS.content.negative} !important;\n\t}\n\t.input--class {\n\t\tborder: none;\n\t\t:active,\n\t\t&:focus {\n\t\t\tborder: none;\n\t\t\toutline: none;\n\t\t}\n\t}\n\t.success--inside--chip {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 4px 8px;\n\t\talign-items: center;\n\t\tgap: 6px;\n\t\tborder-radius: 4px;\n\t\tbackground: ${COLORS.background.positive.vibrant};\n\t}\n\t.demo--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tgap: 8px;\n\t}\n\t.demo--input {\n\t\tcolor: ${COLORS.background.brand};\n\t\tborder-bottom: 1px solid ${COLORS.background.brand};\n\t\twidth: fit-content;\n\t\tcursor: pointer;\n\t}\n\t.demo--phone {\n\t\tdisplay: flex;\n\t\tpadding: 8px;\n\t\talign-items: center;\n\t\tgap: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground-color: ${COLORS.background.brandLight};\n\t}\n\t.button--wrapper {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: flex-start;\n\t\tgap: 8px;\n\t}\n`;\n\nexport const defaultTabs = [\n\t{ key: 'Monthly', title: 'Monthly' },\n\t{ key: 'yearly', title: 'Yearly' },\n];\n\n// Selected plan to have chosen plan not selectable\n\nexport const SubscriptionPlanSelector: FunctionComponent<Props> = (props) => {\n\tconst [inputValue, setInputValue] = useState(\n\t\tprops.discountInputProperties?.defaultValue,\n\t);\n\tconst eachCardWidth = props.staticWidthMultiplier\n\t\t? props.staticWidthMultiplier\n\t\t: 275;\n\treturn (\n\t\t<StyledModal\n\t\t\tcentralContainerStyles={{\n\t\t\t\twidth: props.plans.length * eachCardWidth,\n\t\t\t}}\n\t\t\topen={true}\n\t\t\tcloseOnOutsideClick={true}\n\t\t\tonClose={props.onClose}\n\t\t>\n\t\t\t<HeaderWrapper>\n\t\t\t\t<div>\n\t\t\t\t\t<TitleMedium>\n\t\t\t\t\t\t{props.header \|\| 'Select a plan to proceed'}\n\t\t\t\t\t</TitleMedium>\n\t\t\t\t\t<BodyPrimary className=\"sub--header\">\n\t\t\t\t\t\t{props.subHeader \|\| ''}\n\t\t\t\t\t</BodyPrimary>\n\t\t\t\t</div>\n\t\t\t\t{props.showMonthlyTabs ? (\n\t\t\t\t\t<Tabs\n\t\t\t\t\t\ttabs={\n\t\t\t\t\t\t\tprops.tabProperties && props.tabProperties.tabs\n\t\t\t\t\t\t\t\t? props.tabProperties.tabs\n\t\t\t\t\t\t\t\t: defaultTabs\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonTabSelected={(selectedTab) =>\n\t\t\t\t\t\t\tprops.tabProperties?.onTabSelected\n\t\t\t\t\t\t\t\t? props.tabProperties?.onTabSelected(selectedTab)\n\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t}\n\t\t\t\t\t\tisSquared\n\t\t\t\t\t></Tabs>\n\t\t\t\t) : (\n\t\t\t\t\t<></>\n\t\t\t\t)}\n\t\t\t</HeaderWrapper>\n\t\t\t{props.warningDescription && (\n\t\t\t\t<Warning>{props.warningDescription}</Warning>\n\t\t\t)}\n\t\t\t{/<DurationSelector/}\n\t\t\t{/\tisMonthlySelected={monthly}/}\n\t\t\t{/\tyearlyDiscount={\"20\"}/}\n\t\t\t{/\tonToggle={setIsMonthly}/}\n\t\t\t{//>/}\n\t\t\t<PlanWrapper>\n\t\t\t\t{props.plans.map((prop) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<SubscriptionPlan\n\t\t\t\t\t\t\t{...prop}\n\t\t\t\t\t\t\tshowMonthly={true}\n\t\t\t\t\t\t\tshowMonthlyOptions={props.showMonthlyOptions \|\| false}\n\t\t\t\t\t\t\tshowTrialOptions={props.showTrialOptions \|\| false}\n\t\t\t\t\t\t\tonPlanSelect={props.onPlanSelect}\n\t\t\t\t\t\t\tkey={prop.planName}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t</PlanWrapper>\n\t\t\t{(props.showCouponApplicationCode \|\| props.showBookAdemo) && (\n\t\t\t\t<BottomWrapper>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t{props.showCouponApplicationCode && (\n\t\t\t\t\t\t\t<div className=\"coupon-code\">\n\t\t\t\t\t\t\t\t<div className=\"coupon-input\">\n\t\t\t\t\t\t\t\t\t<BodyPrimary\n\t\t\t\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\t\t\t\tcolor: props.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t? COLORS.content.negative\n\t\t\t\t\t\t\t\t\t\t\t\t: '',\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tApply coupon code\n\t\t\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t\t\t\t<div className=\"button--wrapper\">\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.errorMessage\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 'error--border dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 'dotted--border'\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<input\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"input--class\"\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={(text) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tconst sanitized = stripHtmlTags(text.target.value);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue(sanitized);\n\t\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.onChangeText(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tsanitized,\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={inputValue}\n\t\t\t\t\t\t\t\t\t\t\t\tplaceholder=\"eg:PLAN20\"\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"success--inside--chip\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.primaryInverse}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<BodyCaption\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: COLORS.content.primaryInverse }}\n\t\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tCoupon applied\n\t\t\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t{!props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonText=\"Apply\"\n\t\t\t\t\t\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={props?.discountInputProperties?.onCouponApply}\n\t\t\t\t\t\t\t\t\t\t\t\tisLoading={props.discountInputProperties?.isLoading}\n\t\t\t\t\t\t\t\t\t\t\t></Button>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage && (\n\t\t\t\t\t\t\t\t\t\t<div className=\"d-flex\" style={{ gap: 8 }}>\n\t\t\t\t\t\t\t\t\t\t\t<Info\n\t\t\t\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\t\t\t\tcolor={COLORS.content.negative}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.negative }}>\n\t\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.errorMessage ??\n\t\t\t\t\t\t\t\t\t\t\t\t\t'Enter a valid code'}\n\t\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.showRemoveCoupon && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\t\t\tsetInputValue('');\n\t\t\t\t\t\t\t\t\t\t\t\tprops.discountInputProperties?.removeCoupon\n\t\t\t\t\t\t\t\t\t\t\t\t\t? props.discountInputProperties?.removeCoupon()\n\t\t\t\t\t\t\t\t\t\t\t\t\t: '';\n\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\tRemove coupon\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText && (\n\t\t\t\t\t\t\t\t\t<div className=\"coupon--success--chip\">\n\t\t\t\t\t\t\t\t\t\t<BodyCaption style={{ color: '#00580E', maxWidth: 180 }}>\n\t\t\t\t\t\t\t\t\t\t\t{props.discountInputProperties?.successText}\n\t\t\t\t\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t\t\t\t\t</div>\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</div>\n\t\t\t\t\t{props.showBookAdemo && (\n\t\t\t\t\t\t<div className=\"demo--wrapper\">\n\t\t\t\t\t\t\t<div className=\"demo--phone\">\n\t\t\t\t\t\t\t\t<PhoneIcon\n\t\t\t\t\t\t\t\t\theight={16}\n\t\t\t\t\t\t\t\t\twidth={16}\n\t\t\t\t\t\t\t\t\tcolor={COLORS.background.brand}\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\t<BodyPrimary\n\t\t\t\t\t\t\t\tclassName=\"demo--input\"\n\t\t\t\t\t\t\t\tonClick={() =>\n\t\t\t\t\t\t\t\t\tprops.demoLink\n\t\t\t\t\t\t\t\t\t\t? window.open(props.demoLink, '_blank')\n\t\t\t\t\t\t\t\t\t\t: props.onClickingBookADemo\n\t\t\t\t\t\t\t\t\t\t? props.onClickingBookADemo()\n\t\t\t\t\t\t\t\t\t\t: ''\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\tBook a demo with the team\n\t\t\t\t\t\t\t</BodyPrimary>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</BottomWrapper>\n\t\t\t)}\n\t\t</StyledModal>\n\t);\n};\n"],"names":["PlanWrapper","styled","Warning","COLORS","HeaderWrapper","BottomWrapper","defaultTabs","SubscriptionPlanSelector","props","inputValue","setInputValue","useState","eachCardWidth","jsxs","StyledModal","jsx","TitleMedium","BodyPrimary","Tabs","selectedTab","Fragment","prop","createElement","SubscriptionPlan","text","sanitized","stripHtmlTags","Check","BodyCaption","Button","Info","PhoneIcon"],"mappings":"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"}

package/dist/esm/components/product-picker-v2/style.js CHANGED Viewed

@@ -30,7 +30,7 @@ const p = e.div`
 	column-gap: 16px;
 	justify-content: space-between;
 	align-items: center;
-	:hover {
+	&:hover {
 		cursor: pointer;
 		background-color: ${t.surface.hovered};
 	}
@@ -75,7 +75,7 @@ const p = e.div`
 	justify-content: flex-start;
 	align-items: center;
 	padding-left: ${(i) => i.isVariant ? "42px" : "16px"};
-	:hover {
+	&:hover {
 		cursor: pointer;
 		background-color: ${t.surface.hovered};
 	}