@bikdotai/bik-component-library 0.0.820 → 0.0.821-0

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js

@@ -0,0 +1,310 @@
+import i, { css as o } from "styled-components";
+import { BodyTiny as d } from "../../TypographyStyle.js";
+import { COLORS as t, BASE_COLORS as n, FONTS as r } from "../../../constants/Theme.js";
+const x = i.div`
+	background-color: #28034e;
+	width: 72px;
+	justify-content: space-between;
+	position: sticky;
+	top: 0;
+	left: 0;
+	z-index: 10;
+	overflow-y: auto;
+	height: 100vh;
+
+	.bik-header-logo {
+		padding: 8px 8px 0 8px;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		cursor: pointer;
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: container;
+		}
+	}
+`, c = i.div`
+	margin: 0px 0px 16px;
+	padding-bottom: 8px;
+`, u = i.div``, g = i.div`
+	padding: 0px 6px;
+	margin-bottom: 6px;
+	> * {
+		gap: 4px;
+	}
+`, l = i.div`
+	position: absolute;
+	right: 5px;
+	background: ${t.stroke.warning.vibrant} !important;
+	font-size: 7.7px;
+	font-family: 'Inter';
+	line-height: 10px;
+	padding: 2px 9.27px 2px 9.27px;
+	border-radius: 16px 16px 0px 16px;
+	background: ${t.background.inverse};
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}
+`, m = i.div`
+	position: absolute;
+	right: 10px;
+	margin-top: -5px;
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 116px;
+				z-index: 1;
+			}
+		`}
+	${({ is2ndLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				bottom: 48px;
+				z-index: 1;
+			}
+		`}
+`, h = i.div`
+	display: flex;
+	flex-direction: column;
+	border-radius: 10px;
+	align-items: center;
+	justify-content: space-around;
+	cursor: pointer;
+	> * {
+		gap: 10px;
+	}
+	padding: 8px 0px;
+
+	${({ isNew: e }) => e && o`
+			padding-top: 14px;
+		`}
+
+	${({ isActive: e }) => e && o`
+			border-radius: 8px;
+			background-color: ${n.brand[850]};
+			color: ${t.content.primaryInverse};
+			box-shadow: inset 0 0 0 1px ${t.stroke.brandSubdued};
+		`}
+
+	${({ isHovered: e }) => e && o`
+			background: ${t.background.brandHovered};
+			border-radius: 8px;
+		`}
+
+	&:hover:not([data-active='true']) {
+		background: ${t.background.brandHovered};
+		border-radius: 8px;
+	}
+
+	${({ isActive: e, isHovered: a }) => e && a && o`
+			border-radius: 8px;
+			box-shadow: inset 0 0 0 1px ${n.brand[700]};
+			background-color: ${n.brand[800]};
+		`}
+
+	${({ isLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 72px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+
+	${({ is2ndLastSticky: e }) => e && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: 8px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+
+	${({ stickyBottom: e }) => e !== void 0 && o`
+			@media (min-height: 768px) {
+				position: absolute;
+				bottom: ${e}px;
+				left: 6px;
+				right: 6px;
+			}
+		`}
+`, f = i.div`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+	cursor: pointer;
+`, $ = i(d)`
+	user-select: none;
+	width: 100%;
+	color: ${({ isActive: e }) => e ? t.content.primaryInverse : t.content.secondaryInverse};
+	margin-bottom: 0px;
+	text-align: center;
+`, v = i.div`
+	.transform-class {
+		position: relative;
+		animation: animatebottom 0.2s;
+		transition-timing-function: ease-out;
+	}
+	@keyframes animatebottom {
+		from {
+			opacity: 0;
+		}
+
+		to {
+			opacity: 1;
+		}
+	}
+	.sidebar-right-menu {
+		position: ${(e) => e.postion ? e.postion : "sticky"};
+		top: ${(e) => e.top ? e.top : 0}px;
+		left: ${(e) => e.left ? e.left : 0}px; //72
+		width: ${(e) => e.width ? e.width : 240}px;
+		z-index: ${(e) => e.zIndex ? e.zIndex : 2};
+		background-color: ${(e) => e.theme == "brand" ? t.background.inverse : t.surface.standard};
+		height: ${(e) => e.isNewSidebar ? "fit-content" : "100vh"};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		border-radius: ${(e) => e.isNewSidebar ? "8px" : ""};
+
+		.sidebar-bridge {
+			position: absolute;
+			right: 100%;
+			top: 0;
+			width: 6px;
+			height: 100%;
+		}
+	}
+
+	.sub-child-menu {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+		margin-bottom: ${(e) => e.isNewSidebar ? "" : "8px"};
+		cursor: pointer;
+		background: ${(e) => e.theme == "brand" ? t.background.inverse : "transparent"};
+		border-radius: 4px;
+		.sub-child-text {
+			color: ${(e) => e.theme == "brand" ? t.surface.standard : ""};
+			margin-bottom: 0px;
+			padding: 8px 12px;
+			font-size: ${r.caption.fontSize}px;
+			line-height: ${r.caption.lineHeight}px;
+			font-weight: ${r.caption.fontWeight};
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.sub-child-new-tag {
+			padding: 2px 9px 2px 9px;
+			border-radius: 16px;
+			background-color: rgba(254, 192, 45, 1);
+			font-family: Inter;
+			font-size: 7px;
+			font-weight: 600;
+			line-height: 10px;
+			color: rgba(40, 3, 78, 1);
+		}
+		.sub-child-active-text {
+			display: none;
+		}
+		.active-bold-weight {
+			font-weight: 600;
+			color: ${(e) => e.isNewSidebar ? t.background.warning.vibrant : ""};
+		}
+		.sub-child-active-menu-style {
+			color: ${(e) => e.isNewSidebar ? t.background.warning.vibrant : ""};
+		}
+	}
+	.sub-child-menu:hover {
+		background: ${(e) => e.theme == "brand" ? t.background.brandHovered : t.background.base};
+		border-radius: 4px;
+	}
+	.sub-child-active-menu {
+		background: ${(e) => e.theme == "brand" ? t.background.brandHovered : t.background.base};
+		border-radius: 4px;
+		border: ${(e) => e.theme == "brand" ? `1px solid ${t.stroke.brandSubdued}` : "none"};
+		.sub-child-active-text {
+			background: ${(e) => e.theme == "brand" ? t.stroke.brandSubdued : t.background.warning.vibrant};
+		}
+	}
+	.sub-child-active-menu:hover {
+		background: ${(e) => e.theme == "brand" ? t.background.inverseLight : t.background.base};
+		border-radius: 4px;
+		border: ${(e) => e.theme == "brand" ? `1px solid ${t.stroke.brandSubdued}` : "none"};
+		.sub-child-active-text {
+			background: ${(e) => e.theme == "brand" ? t.stroke.brandSubdued : t.background.warning.vibrant};
+		}
+	}
+	.sub-child-display-name {
+		padding: 14px 12px;
+		color: ${(e) => e.theme == "brand" ? t.content.secondaryInverse : t.text.secondary};
+	}
+	.lower-sticky-panel {
+		position: ${(e) => e.isNewSidebar ? "relative" : "absolute"};
+		bottom: ${(e) => e.isNewSidebar ? "" : "16px"};
+		margin-top: ${(e) => e.isNewSidebar ? "auto" : ""};
+		margin-bottom: ${(e) => e.isNewSidebar ? "16px" : ""};
+		.title-text {
+			padding: 8px 12px;
+			text-align: center;
+		}
+		.upgrade-button {
+			margin: auto;
+		}
+	}
+	.sidebar-skeleton {
+		padding: 8px;
+	}
+`, k = i.div`
+	.sidebar-right-menu {
+		border-radius: 8px;
+		border: 0.5px solid var(--stroke-color-stroke-primary, #e0e0e0);
+		box-shadow: 0px 0px 12px 0px rgba(222, 236, 255, 0.6);
+		position: ${(e) => e.postion ? e.postion : "sticky"};
+		top: ${(e) => e.top ? e.top : void 0}px;
+		bottom: 10px;
+		left: ${(e) => e.left ? e.left : 0}px; //72
+		z-index: ${(e) => e.zIndex ? e.zIndex : 2};
+		background-color: ${(e) => e.theme == "brand" ? "#381062" : t.surface.standard};
+		display: flex;
+		flex-direction: column;
+		padding: 4px;
+		gap: 4px;
+		min-height: 100px;
+		overflow-y: auto;
+	}
+	.each-menu {
+		padding: 8px;
+		gap: 4px;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: flex-start;
+		border-bottom: 0.5px solid #e0e0e0;
+		cursor: pointer;
+		max-width: 320px;
+		&:hover {
+			background-color: ${t.background.base};
+			border-radius: 8px;
+		}
+	}
+`;
+export {
+  c as MainSideBarV2MenuWrapper,
+  u as SibeBarV2MenuItem,
+  x as SideBarV2Container,
+  m as SidebarLockedChannel,
+  g as SidebarMainMenu,
+  f as SidebarMenuItemContainer,
+  h as SidebarMenuItemInner,
+  $ as SidebarMenuItemText,
+  l as SidebarNewTag,
+  k as SidebarV2PopupContainer,
+  v as SimpleSidebarV2Container
+};
+//# sourceMappingURL=SidebarV2Styles.js.map

package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarV2Styles.js","sources":["../../../../../src/components/bik-layout/BikSidebarV2/SidebarV2Styles.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BodyTiny } from '@src/components/TypographyStyle';\nimport { BASE_COLORS, COLORS, FONTS } from '@src/constants/Theme';\nimport { SidebarV2Theme } from './SidebarV2.model';\n\nexport const SideBarV2Container = styled.div`\n\tbackground-color: #28034e;\n\twidth: 72px;\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\nexport const MainSideBarV2MenuWrapper = styled.div`\n\tmargin: 0px 0px 16px;\n\tpadding-bottom: 8px;\n`;\n\nexport const SibeBarV2MenuItem = styled.div``;\n\nexport const SidebarMainMenu = styled.div`\n\tpadding: 0px 6px;\n\tmargin-bottom: 6px;\n\t> * {\n\t\tgap: 4px;\n\t}\n`;\n\nexport const SidebarNewTag = styled.div<{ isLastSticky?: boolean }>`\n\tposition: absolute;\n\tright: 5px;\n\tbackground: ${COLORS.stroke.warning.vibrant} !important;\n\tfont-size: 7.7px;\n\tfont-family: 'Inter';\n\tline-height: 10px;\n\tpadding: 2px 9.27px 2px 9.27px;\n\tborder-radius: 16px 16px 0px 16px;\n\tbackground: ${COLORS.background.inverse};\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 116px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarLockedChannel = styled.div<{\n\tisLastSticky?: boolean;\n\tis2ndLastSticky?: boolean;\n}>`\n\tposition: absolute;\n\tright: 10px;\n\tmargin-top: -5px;\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 116px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n\t${({ is2ndLastSticky }) =>\n\t\tis2ndLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tbottom: 48px;\n\t\t\t\tz-index: 1;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarMenuItemInner = styled.div<{\n\tisActive?: boolean;\n\tisHovered?: boolean;\n\tisNew?: boolean;\n\tisLastSticky?: boolean;\n\tis2ndLastSticky?: boolean;\n\tstickyBottom?: number;\n}>`\n\tdisplay: flex;\n\tflex-direction: column;\n\tborder-radius: 10px;\n\talign-items: center;\n\tjustify-content: space-around;\n\tcursor: pointer;\n\t> * {\n\t\tgap: 10px;\n\t}\n\tpadding: 8px 0px;\n\n\t${({ isNew }) =>\n\t\tisNew &&\n\t\tcss`\n\t\t\tpadding-top: 14px;\n\t\t`}\n\n\t${({ isActive }) =>\n\t\tisActive &&\n\t\tcss`\n\t\t\tborder-radius: 8px;\n\t\t\tbackground-color: ${BASE_COLORS.brand['850']};\n\t\t\tcolor: ${COLORS.content.primaryInverse};\n\t\t\tbox-shadow: inset 0 0 0 1px ${COLORS.stroke.brandSubdued};\n\t\t`}\n\n\t${({ isHovered }) =>\n\t\tisHovered &&\n\t\tcss`\n\t\t\tbackground: ${COLORS.background.brandHovered};\n\t\t\tborder-radius: 8px;\n\t\t`}\n\n\t&:hover:not([data-active='true']) {\n\t\tbackground: ${COLORS.background.brandHovered};\n\t\tborder-radius: 8px;\n\t}\n\n\t${({ isActive, isHovered }) =>\n\t\tisActive &&\n\t\tisHovered &&\n\t\tcss`\n\t\t\tborder-radius: 8px;\n\t\t\tbox-shadow: inset 0 0 0 1px ${BASE_COLORS.brand['700']};\n\t\t\tbackground-color: ${BASE_COLORS.brand['800']};\n\t\t`}\n\n\t${({ isLastSticky }) =>\n\t\tisLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 72px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n\n\t${({ is2ndLastSticky }) =>\n\t\tis2ndLastSticky &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: 8px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n\n\t${({ stickyBottom }) =>\n\t\tstickyBottom !== undefined &&\n\t\tcss`\n\t\t\t@media (min-height: 768px) {\n\t\t\t\tposition: absolute;\n\t\t\t\tbottom: ${stickyBottom}px;\n\t\t\t\tleft: 6px;\n\t\t\t\tright: 6px;\n\t\t\t}\n\t\t`}\n`;\n\nexport const SidebarMenuItemContainer = styled.div`\n\tdisplay: flex;\n\tflex-direction: row;\n\twidth: 100%;\n\tcursor: pointer;\n`;\n\nexport const SidebarMenuItemText = styled(BodyTiny)<{ isActive?: boolean }>`\n\tuser-select: none;\n\twidth: 100%;\n\tcolor: ${({ isActive }) =>\n\t\tisActive ? COLORS.content.primaryInverse : COLORS.content.secondaryInverse};\n\tmargin-bottom: 0px;\n\ttext-align: center;\n`;\n\nexport const SimpleSidebarV2Container = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarV2Theme;\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.2s;\n\t\ttransition-timing-function: ease-out;\n\t}\n\t@keyframes animatebottom {\n\t\tfrom {\n\t\t\topacity: 0;\n\t\t}\n\n\t\tto {\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; //72\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'\n\t\t\t\t? COLORS.background.inverse\n\t\t\t\t: COLORS.surface.standard};\n\t\theight: ${(props) => (props.isNewSidebar ? 'fit-content' : '100vh')};\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tpadding: 4px;\n\t\tborder-radius: ${(props) => (props.isNewSidebar ? '8px' : '')};\n\n\t\t.sidebar-bridge {\n\t\t\tposition: absolute;\n\t\t\tright: 100%;\n\t\t\ttop: 0;\n\t\t\twidth: 6px;\n\t\t\theight: 100%;\n\t\t}\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\tbackground: ${(props) =>\n\t\t\tprops.theme == 'brand' ? COLORS.background.inverse : 'transparent'};\n\t\tborder-radius: 4px;\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\tfont-size: ${FONTS.caption.fontSize}px;\n\t\t\tline-height: ${FONTS.caption.lineHeight}px;\n\t\t\tfont-weight: ${FONTS.caption.fontWeight};\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\tdisplay: none;\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.brandHovered\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 4px;\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.brandHovered\n\t\t\t\t: COLORS.background.base};\n\t\tborder-radius: 4px;\n\t\tborder: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? `1px solid ${COLORS.stroke.brandSubdued}`\n\t\t\t\t: 'none'};\n\t\t.sub-child-active-text {\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.theme == 'brand'\n\t\t\t\t\t? COLORS.stroke.brandSubdued\n\t\t\t\t\t: COLORS.background.warning.vibrant};\n\t\t}\n\t}\n\t.sub-child-active-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: 4px;\n\t\tborder: ${(props) =>\n\t\t\tprops.theme == 'brand'\n\t\t\t\t? `1px solid ${COLORS.stroke.brandSubdued}`\n\t\t\t\t: 'none'};\n\t\t.sub-child-active-text {\n\t\t\tbackground: ${(props) =>\n\t\t\t\tprops.theme == 'brand'\n\t\t\t\t\t? COLORS.stroke.brandSubdued\n\t\t\t\t\t: COLORS.background.warning.vibrant};\n\t\t}\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 SidebarV2PopupContainer = styled.div<{\n\tpostion?: 'fixed' | 'sticky';\n\ttop?: number;\n\ttheme: SidebarV2Theme;\n\tzIndex?: number;\n\tleft?: number;\n\tbottom?: number;\n}>`\n\t.sidebar-right-menu {\n\t\tborder-radius: 8px;\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; //72\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: 4px;\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":["SideBarV2Container","styled","MainSideBarV2MenuWrapper","SibeBarV2MenuItem","SidebarMainMenu","SidebarNewTag","COLORS","isLastSticky","css","SidebarLockedChannel","is2ndLastSticky","SidebarMenuItemInner","isNew","isActive","BASE_COLORS","isHovered","stickyBottom","SidebarMenuItemContainer","SidebarMenuItemText","BodyTiny","SimpleSidebarV2Container","props","FONTS","SidebarV2PopupContainer"],"mappings":"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"}

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.d.ts

@@ -0,0 +1,2 @@
+import { SimpleSidebarV2Props } from './SidebarV2.model';
+export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js

@@ -0,0 +1,107 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import { useState as x } from "react";
+import { COLORS as C } from "../../../constants/Theme.js";
+import { NavigationHyperlink as L } from "../../navigation-hyperlink/NavigationHyperlink.js";
+import { BodyCaption as m, TitleSmall as O } from "../../TypographyStyle.js";
+import { SimpleSidebarV2Container as U } from "./SidebarV2Styles.js";
+import { Button as A } from "../../button/Button.js";
+const $ = (u) => {
+  const {
+    menuList: c,
+    activeMenu: d,
+    theme: r,
+    showAccessUpgradePanel: p = !1,
+    header: b,
+    width: h,
+    zIndex: v,
+    left: N,
+    postion: g,
+    top: y,
+    router: f,
+    onMouseLeaveOnMenu: k,
+    onMouseEnterOnMenu: M,
+    onMenuClick: S,
+    onUpgrade: n,
+    isNewSidebar: o
+  } = u, [i, w] = x(d), l = (e, s) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: `sub-child-menu  ${i?.key == e?.key ? "sub-child-active-menu" : ""}`,
+      onClick: () => {
+        w(e), S(e, !e.page);
+      },
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ a(
+          "span",
+          {
+            className: i?.key == e?.key && r == "brand" ? "sub-child-active-text" : ""
+          }
+        ),
+        /* @__PURE__ */ a(
+          m,
+          {
+            className: `sub-child-text ${i?.key == e?.key && r == "white" ? "active-bold-weight" : ""}`,
+            children: e?.displayName
+          }
+        ),
+        e.isNew && /* @__PURE__ */ a("div", { className: "sub-child-new-tag", children: "NEW" })
+      ]
+    },
+    s
+  );
+  return /* @__PURE__ */ a(
+    U,
+    {
+      width: h,
+      zIndex: v,
+      left: N,
+      theme: r,
+      postion: g,
+      top: y,
+      isNewSidebar: o,
+      children: /* @__PURE__ */ t(
+        "div",
+        {
+          id: "_sub-menu",
+          className: "sidebar-right-menu transform-class",
+          onMouseLeave: k,
+          onMouseEnter: M,
+          children: [
+            /* @__PURE__ */ a("div", { className: "sidebar-bridge" }),
+            /* @__PURE__ */ t("div", { children: [
+              !o && /* @__PURE__ */ a(m, { className: "sub-child-display-name", children: b }),
+              c?.map((e, s) => e.page ? /* @__PURE__ */ a(L, { href: e.page, router: f, children: l(e, s) }) : l(e, s))
+            ] }),
+            p && /* @__PURE__ */ t("div", { className: "lower-sticky-panel", children: [
+              /* @__PURE__ */ a(
+                O,
+                {
+                  className: "title-text",
+                  style: { color: C.surface.standard },
+                  children: "Upgrade plan to access this feature."
+                }
+              ),
+              /* @__PURE__ */ a(
+                A,
+                {
+                  className: "upgrade-button",
+                  buttonText: "Upgrade plan",
+                  buttonType: "primary",
+                  size: "small",
+                  inverse: !0,
+                  onClick: () => n ? n() : ""
+                }
+              )
+            ] })
+          ]
+        },
+        "_sub-menu"
+      )
+    }
+  );
+};
+export {
+  $ as SimpleSidebarV2
+};
+//# sourceMappingURL=SimpleSidebarV2.js.map

package/dist/esm/components/bik-layout/BikSidebarV2/SimpleSidebarV2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SimpleSidebarV2.js","sources":["../../../../../src/components/bik-layout/BikSidebarV2/SimpleSidebarV2.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { COLORS } from '@src/constants/Theme';\nimport { Button } from '../../button';\nimport { NavigationHyperlink } from '../../navigation-hyperlink/NavigationHyperlink';\nimport { BodyCaption, TitleSmall } from '../../TypographyStyle';\nimport { Menu, SimpleSidebarV2Props } from './SidebarV2.model';\nimport { SimpleSidebarV2Container } from './SidebarV2Styles';\n\nexport const SimpleSidebarV2: React.FC<SimpleSidebarV2Props> = (\n\tsimpleSidebarProps,\n) => {\n\tconst {\n\t\tmenuList,\n\t\tactiveMenu,\n\t\ttheme,\n\t\tshowAccessUpgradePanel = false,\n\t\theader,\n\t\twidth,\n\t\tzIndex,\n\t\tleft,\n\t\tpostion,\n\t\ttop,\n\t\trouter,\n\t\tonMouseLeaveOnMenu,\n\t\tonMouseEnterOnMenu,\n\t\tonMenuClick,\n\t\tonUpgrade,\n\t\tisNewSidebar,\n\t} = simpleSidebarProps;\n\n\tconst [isActiveMenu, setIsActiveMenu] = useState(activeMenu);\n\tconst getChildSideBar = (child: Menu, hoveredIndex: number) => {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={`sub-child-menu  ${\n\t\t\t\t\tisActiveMenu?.key == child?.key ? 'sub-child-active-menu' : ''\n\t\t\t\t}`}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetIsActiveMenu(child);\n\t\t\t\t\tonMenuClick(child, !child.page);\n\t\t\t\t}}\n\t\t\t\tkey={hoveredIndex}\n\t\t\t\taria-hidden=\"true\"\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisActiveMenu?.key == child?.key && theme == 'brand'\n\t\t\t\t\t\t\t? 'sub-child-active-text'\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<BodyCaption\n\t\t\t\t\tclassName={`sub-child-text ${\n\t\t\t\t\t\tisActiveMenu?.key == child?.key && theme == 'white'\n\t\t\t\t\t\t\t? 'active-bold-weight'\n\t\t\t\t\t\t\t: ''\n\t\t\t\t\t}`}\n\t\t\t\t>\n\t\t\t\t\t{child?.displayName}\n\t\t\t\t</BodyCaption>\n\t\t\t\t{child.isNew && <div className=\"sub-child-new-tag\">NEW</div>}\n\t\t\t</div>\n\t\t);\n\t};\n\n\treturn (\n\t\t<SimpleSidebarV2Container\n\t\t\twidth={width}\n\t\t\tzIndex={zIndex}\n\t\t\tleft={left}\n\t\t\ttheme={theme}\n\t\t\tpostion={postion}\n\t\t\ttop={top}\n\t\t\tisNewSidebar={isNewSidebar}\n\t\t>\n\t\t\t<div\n\t\t\t\tid={'_sub-menu'}\n\t\t\t\tkey={'_sub-menu'}\n\t\t\t\tclassName={'sidebar-right-menu' + ' transform-class'}\n\t\t\t\tonMouseLeave={onMouseLeaveOnMenu}\n\t\t\t\tonMouseEnter={onMouseEnterOnMenu}\n\t\t\t>\n\t\t\t\t<div className=\"sidebar-bridge\" />\n\t\t\t\t<div>\n\t\t\t\t\t{!isNewSidebar && (\n\t\t\t\t\t\t<BodyCaption className=\"sub-child-display-name\">\n\t\t\t\t\t\t\t{header}\n\t\t\t\t\t\t</BodyCaption>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{menuList?.map((child, hoveredIndex) => {\n\t\t\t\t\t\treturn child.page ? (\n\t\t\t\t\t\t\t<NavigationHyperlink href={child.page} router={router}>\n\t\t\t\t\t\t\t\t{getChildSideBar(child, hoveredIndex)}\n\t\t\t\t\t\t\t</NavigationHyperlink>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\tgetChildSideBar(child, hoveredIndex)\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</div>\n\t\t\t\t{showAccessUpgradePanel && (\n\t\t\t\t\t<div className=\"lower-sticky-panel\">\n\t\t\t\t\t\t<TitleSmall\n\t\t\t\t\t\t\tclassName=\"title-text\"\n\t\t\t\t\t\t\tstyle={{ color: COLORS.surface.standard }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\tUpgrade plan to access this feature.\n\t\t\t\t\t\t</TitleSmall>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"upgrade-button\"\n\t\t\t\t\t\t\tbuttonText=\"Upgrade plan\"\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tinverse\n\t\t\t\t\t\t\tonClick={() => (onUpgrade ? onUpgrade() : '')}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</SimpleSidebarV2Container>\n\t);\n};\n"],"names":["SimpleSidebarV2","simpleSidebarProps","menuList","activeMenu","theme","showAccessUpgradePanel","header","width","zIndex","left","postion","top","router","onMouseLeaveOnMenu","onMouseEnterOnMenu","onMenuClick","onUpgrade","isNewSidebar","isActiveMenu","setIsActiveMenu","useState","getChildSideBar","child","hoveredIndex","jsxs","jsx","BodyCaption","SimpleSidebarV2Container","NavigationHyperlink","TitleSmall","COLORS","Button"],"mappings":"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"}

package/dist/esm/components/bik-layout/index.d.ts

@@ -3,6 +3,8 @@ export * from './BikLayout';
 export * from './BikProfile';
 export * from './SimpleSidebar';
 export * from './BikSidebar';
+export * from './BikSidebarV2/BikSidebarV2';
+export * from './BikSidebarV2/SidebarV2.model';
 export * from './FeatureModal';
 export * from './SidebarSkeleton';
 export * from './ShowShopifyRestrictedModal';

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

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as u, Fragment as D } from "react/jsx-runtime";
-import s, { forwardRef as F, useCallback as G } from "react";
-import { Button as P, ButtonCustomDashedBorder as W } from "./Button.styled.js";
-import { getButtonIconColor as $, SpinnerColorMap as q, GetButtonTextComponent as A } from "./themes.js";
+import { jsx as t, jsxs as B, Fragment as F } from "react/jsx-runtime";
+import s, { forwardRef as G, useCallback as P } from "react";
+import { Button as W, ButtonCustomDashedBorder as $ } from "./Button.styled.js";
+import { getButtonIconColor as q, SpinnerColorMap as z, GetButtonTextComponent as A } from "./themes.js";
 import { Spinner as H } from "../spinner/Spinner.js";
-const J = F(
+const J = G(
   ({
-    version: x,
+    version: u,
     id: v,
-    buttonType: e = "primary",
-    size: l = "small",
-    buttonText: i,
+    buttonType: l = "primary",
+    size: e = "small",
+    buttonText: m,
     disabled: a,
-    IconComponent: m,
+    IconComponent: i,
     LeadingIcon: d,
     TrailingIcon: h,
     isLoading: r,
@@ -29,39 +29,39 @@ const J = F(
     LeadingIconStyles: _,
     ...N
   }, g) => {
-    const z = A(
-      l,
+    const D = A(
       e,
-      a
-    ), f = $(
       l,
+      a
+    ), f = q(
       e,
+      l,
       n,
       a,
       r,
       p
-    ), o = G(() => {
-      const B = l === "chip" ? 16 : 20;
+    ), o = P(() => {
+      const x = e === "chip" || e === "xs" ? 16 : 20;
       return {
-        height: B,
-        width: B,
+        height: x,
+        width: x,
         color: c || f,
         style: { display: "block" },
         className: "icon"
       };
-    }, [l, c, f]);
+    }, [e, c, f]);
     return /* @__PURE__ */ t(
-      P,
+      W,
       {
         "data-test": N["data-test"],
-        version: x,
+        version: u,
         onClick: r ? () => {
         } : y,
         ref: g,
         id: v,
         disabled: a,
-        size: l,
-        buttonType: e,
+        size: e,
+        buttonType: l,
         isLoading: r,
         inverse: n,
         matchParentWidth: C,
@@ -70,17 +70,17 @@ const J = F(
         error: j,
         buttonColor: R,
         ...N,
-        children: /* @__PURE__ */ u("div", { className: "button-container", children: [
-          e.startsWith("dash") && /* @__PURE__ */ t(W, {}),
+        children: /* @__PURE__ */ B("div", { className: "button-container", children: [
+          l.startsWith("dash") && /* @__PURE__ */ t($, {}),
           /* @__PURE__ */ t("div", { className: "overlay-container", children: r && /* @__PURE__ */ t(
             H,
             {
               className: "spinner",
               size: "small",
-              color: q(e, n)
+              color: z(l, n)
             }
           ) }),
-          m && /* @__PURE__ */ t("div", { className: "icon-component", children: s.createElement(m, o()) }),
+          i && /* @__PURE__ */ t("div", { className: "icon-component", children: s.createElement(i, o()) }),
           d && /* @__PURE__ */ t(
             "div",
             {
@@ -89,8 +89,8 @@ const J = F(
               children: s.createElement(d, o())
             }
           ),
-          i ? /* @__PURE__ */ u(
-            z,
+          m ? /* @__PURE__ */ B(
+            D,
             {
               className: "text",
               style: {
@@ -98,11 +98,11 @@ const J = F(
                 fontSize: w
               },
               children: [
-                i,
+                m,
                 /* @__PURE__ */ t("div", { className: "text-subtitle", children: E })
               ]
             }
-          ) : /* @__PURE__ */ t(D, {}),
+          ) : /* @__PURE__ */ t(F, {}),
           h && /* @__PURE__ */ t("div", { className: "icon-trailing", style: { zIndex: 1 }, children: s.createElement(h, o()) })
         ] })
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"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"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import { forwardRef, useCallback } from 'react';\nimport React from 'react';\nimport { Spinner } from '../spinner';\nimport * as Sc from './Button.styled';\nimport { ButtonProps } from './model';\nimport {\n\tgetButtonIconColor,\n\tGetButtonTextComponent,\n\tSpinnerColorMap,\n} from './themes';\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\tversion,\n\t\t\tid,\n\t\t\tbuttonType = 'primary',\n\t\t\tsize = 'small',\n\t\t\tbuttonText,\n\t\t\tdisabled,\n\t\t\tIconComponent,\n\t\t\tLeadingIcon,\n\t\t\tTrailingIcon,\n\t\t\tisLoading,\n\t\t\tinverse,\n\t\t\tonClick,\n\t\t\tmatchParentWidth,\n\t\t\tsubtitle,\n\t\t\tdarkMode,\n\t\t\tactivated,\n\t\t\terror,\n\t\t\tbuttonTextColor,\n\t\t\tbuttonFontSize,\n\t\t\tcustomIconColor,\n\t\t\tbuttonColor,\n\t\t\tLeadingIconStyles,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ButtonTextElement = GetButtonTextComponent(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tdisabled,\n\t\t);\n\n\t\tconst iconColor = getButtonIconColor(\n\t\t\tsize,\n\t\t\tbuttonType,\n\t\t\tinverse,\n\t\t\tdisabled,\n\t\t\tisLoading,\n\t\t\tdarkMode,\n\t\t);\n\n\t\tconst getIconProps = useCallback(() => {\n\t\t\tconst iconSize = size === 'chip' || size === 'xs' ? 16 : 20;\n\t\t\treturn {\n\t\t\t\theight: iconSize,\n\t\t\t\twidth: iconSize,\n\t\t\t\tcolor: customIconColor ? customIconColor : iconColor,\n\t\t\t\tstyle: { display: 'block' },\n\t\t\t\tclassName: 'icon',\n\t\t\t};\n\t\t}, [size, customIconColor, iconColor]);\n\n\t\treturn (\n\t\t\t<Sc.Button\n\t\t\t\tdata-test={rest['data-test']}\n\t\t\t\tversion={version}\n\t\t\t\tonClick={\n\t\t\t\t\tisLoading\n\t\t\t\t\t\t? () => {\n\t\t\t\t\t\t\t\t// Do nothing\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: onClick\n\t\t\t\t}\n\t\t\t\tref={ref}\n\t\t\t\tid={id}\n\t\t\t\tdisabled={disabled}\n\t\t\t\tsize={size}\n\t\t\t\tbuttonType={buttonType}\n\t\t\t\tisLoading={isLoading}\n\t\t\t\tinverse={inverse}\n\t\t\t\tmatchParentWidth={matchParentWidth}\n\t\t\t\tdarkMode={darkMode}\n\t\t\t\tactivated={activated}\n\t\t\t\terror={error}\n\t\t\t\tbuttonColor={buttonColor}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"button-container\">\n\t\t\t\t\t{buttonType.startsWith('dash') && <Sc.ButtonCustomDashedBorder />}\n\t\t\t\t\t<div className=\"overlay-container\">\n\t\t\t\t\t\t{isLoading && (\n\t\t\t\t\t\t\t<Spinner\n\t\t\t\t\t\t\t\tclassName=\"spinner\"\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tcolor={SpinnerColorMap(buttonType, inverse)}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t\t{IconComponent && (\n\t\t\t\t\t\t<div className=\"icon-component\">\n\t\t\t\t\t\t\t{React.createElement(IconComponent, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{LeadingIcon && (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"icon-leading\"\n\t\t\t\t\t\t\tstyle={{ zIndex: 1, ...LeadingIconStyles }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{React.createElement(LeadingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t{buttonText ? (\n\t\t\t\t\t\t<ButtonTextElement\n\t\t\t\t\t\t\tclassName=\"text\"\n\t\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\t\tcolor: buttonTextColor,\n\t\t\t\t\t\t\t\tfontSize: buttonFontSize,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{buttonText}\n\t\t\t\t\t\t\t<div className=\"text-subtitle\">{subtitle}</div>\n\t\t\t\t\t\t</ButtonTextElement>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<></>\n\t\t\t\t\t)}\n\t\t\t\t\t{TrailingIcon && (\n\t\t\t\t\t\t<div className=\"icon-trailing\" style={{ zIndex: 1 }}>\n\t\t\t\t\t\t\t{React.createElement(TrailingIcon, getIconProps())}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</Sc.Button>\n\t\t);\n\t},\n);\n\nButton.displayName = 'Button';\n"],"names":["Button","forwardRef","version","id","buttonType","size","buttonText","disabled","IconComponent","LeadingIcon","TrailingIcon","isLoading","inverse","onClick","matchParentWidth","subtitle","darkMode","activated","error","buttonTextColor","buttonFontSize","customIconColor","buttonColor","LeadingIconStyles","rest","ref","ButtonTextElement","GetButtonTextComponent","iconColor","getButtonIconColor","getIconProps","useCallback","iconSize","jsx","Sc.Button","jsxs","Sc.ButtonCustomDashedBorder","Spinner","SpinnerColorMap","React","Fragment"],"mappings":"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"}

package/dist/esm/components/button/Button.styled.d.ts

@@ -6,7 +6,7 @@ export declare const Button: import('styled-components').StyledComponent<"button
     inverse?: boolean | undefined;
     disabled?: boolean | undefined;
     matchParentWidth?: boolean | undefined;
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
     darkMode?: boolean | undefined;
     activated?: boolean | undefined;
     error?: boolean | undefined;