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

@bikdotai/bik-component-library 0.0.876-beta.0 → 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 (130) 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;"}