@bikdotai/bik-component-library 0.0.799-beta.18 → 0.0.799-beta.2

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

@@ -1,293 +0,0 @@
-import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as r,BASE_COLORS as o,FONTS as n}from"../../../constants/Theme.js";const d=e.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;
-		}
-	}
-`,a=e.div`
-	margin: 0px 0px 16px;
-	padding-bottom: 8px;
-`,p=e.div``,s=e.div`
-	padding: 0px 6px;
-	margin-bottom: 6px;
-	> * {
-		gap: 4px;
-	}
-`,b=e.div`
-	position: absolute;
-	right: 5px;
-	background: ${r.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: ${r.background.inverse};
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 116px;
-				z-index: 1;
-			}
-		`}}
-`,x=e.div`
-	position: absolute;
-	right: 10px;
-	margin-top: -5px;
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 116px;
-				z-index: 1;
-			}
-		`}}
-	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				bottom: 48px;
-				z-index: 1;
-			}
-		`}}
-`,c=e.div`
-	display: flex;
-	flex-direction: column;
-	border-radius: 10px;
-	align-items: center;
-	justify-content: space-around;
-	cursor: pointer;
-	> * {
-		gap: 10px;
-	}
-	padding: 8px 0px;
-
-	${e=>{let{isNew:i}=e;return i&&t`
-			padding-top: 14px;
-		`}}
-
-	${e=>{let{isActive:i}=e;return i&&t`
-			border-radius: 8px;
-			background-color: ${o.brand[850]};
-			color: ${r.content.primaryInverse};
-			box-shadow: inset 0 0 0 1px ${r.stroke.brandSubdued};
-		`}}
-
-	${e=>{let{isHovered:i}=e;return i&&t`
-			background: ${r.background.brandHovered};
-			border-radius: 8px;
-		`}}
-
-	&:hover:not([data-active='true']) {
-		background: ${r.background.brandHovered};
-		border-radius: 8px;
-	}
-
-	${e=>{let{isActive:i,isHovered:r}=e;return i&&r&&t`
-			border-radius: 8px;
-			box-shadow: inset 0 0 0 1px ${o.brand[700]};
-			background-color: ${o.brand[800]};
-		`}}
-
-	${e=>{let{isLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: 72px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-
-	${e=>{let{is2ndLastSticky:i}=e;return i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: 8px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-
-	${e=>{let{stickyBottom:i}=e;return void 0!==i&&t`
-			@media (min-height: 768px) {
-				position: absolute;
-				bottom: ${i}px;
-				left: 6px;
-				right: 6px;
-			}
-		`}}
-`,u=e.div`
-	display: flex;
-	flex-direction: row;
-	width: 100%;
-	cursor: pointer;
-`,l=e(i)`
-	user-select: none;
-	width: 100%;
-	color: ${e=>{let{isActive:t}=e;return t?r.content.primaryInverse:r.content.secondaryInverse}};
-	margin-bottom: 0px;
-	text-align: center;
-`,g=e.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=>"brand"==e.theme?r.background.inverse:r.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=>"brand"==e.theme?r.background.inverse:"transparent"};
-		border-radius: 4px;
-		.sub-child-text {
-			color: ${e=>"brand"==e.theme?r.surface.standard:""};
-			margin-bottom: 0px;
-			padding: 8px 12px;
-			font-size: ${n.caption.fontSize}px;
-			line-height: ${n.caption.lineHeight}px;
-			font-weight: ${n.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?r.background.warning.vibrant:""};
-		}
-		.sub-child-active-menu-style {
-			color: ${e=>e.isNewSidebar?r.background.warning.vibrant:""};
-		}
-	}
-	.sub-child-menu:hover {
-		background: ${e=>"brand"==e.theme?r.background.brandHovered:r.background.base};
-		border-radius: 4px;
-	}
-	.sub-child-active-menu {
-		background: ${e=>"brand"==e.theme?r.background.brandHovered:r.background.base};
-		border-radius: 4px;
-		border: ${e=>"brand"==e.theme?`1px solid ${r.stroke.brandSubdued}`:"none"};
-		.sub-child-active-text {
-			background: ${e=>"brand"==e.theme?r.stroke.brandSubdued:r.background.warning.vibrant};
-		}
-	}
-	.sub-child-active-menu:hover {
-		background: ${e=>"brand"==e.theme?r.background.inverseLight:r.background.base};
-		border-radius: 4px;
-		border: ${e=>"brand"==e.theme?`1px solid ${r.stroke.brandSubdued}`:"none"};
-		.sub-child-active-text {
-			background: ${e=>"brand"==e.theme?r.stroke.brandSubdued:r.background.warning.vibrant};
-		}
-	}
-	.sub-child-display-name {
-		padding: 14px 12px;
-		color: ${e=>"brand"==e.theme?r.content.secondaryInverse:r.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;
-	}
-`,m=e.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=>"brand"==e.theme?"#381062":r.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: ${r.background.base};
-			border-radius: 8px;
-		}
-	}
-`;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,u as SidebarMenuItemContainer,c as SidebarMenuItemInner,l as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { SimpleSidebarV2Props } from './SidebarV2.model';
-export declare const SimpleSidebarV2: React.FC<SimpleSidebarV2Props>;

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

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

package/dist/esm/components/dual-icon-button/DualIconButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DualIconButtonProps } from './model';
-export declare const DualIconButton: React.ForwardRefExoticComponent<DualIconButtonProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +0,0 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{COLORS as n}from"../../constants/Theme.js";import{Container as l,IconHalf as c,Divider as r}from"./DualIconButton.styled.js";const s=i(((i,s)=>{let{id:d,LeftIcon:a,RightIcon:m,onLeftClick:h,onRightClick:b,disabled:p,leftIconColor:y,rightIconColor:f,style:g}=i;const I=p?n.content.inactive:n.content.primaryInverse;return t(l,Object.assign({id:d,ref:s,disabled:p,style:g},{children:[e(c,Object.assign({disabled:p,onClick:p?void 0:h},{children:o.createElement(a,{height:16,width:16,color:y||I,style:{display:"block"}})})),e(r,{}),e(c,Object.assign({disabled:p,onClick:p?void 0:b},{children:o.createElement(m,{height:16,width:16,color:f||I,style:{display:"block"}})}))]}))}));s.displayName="DualIconButton";export{s as DualIconButton};

package/dist/esm/components/dual-icon-button/DualIconButton.styled.d.ts

@@ -1,7 +0,0 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const IconHalf: import("styled-components").StyledComponent<"button", any, {
-    disabled?: boolean | undefined;
-}, never>;
-export declare const Divider: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -1,25 +0,0 @@
-import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";const e=t.div`
-	display: inline-flex;
-	align-items: center;
-	border-radius: 4px;
-	overflow: hidden;
-	background: ${t=>t.disabled?n.background.inactive:n.background.inverseLight};
-`,i=t.button`
-	all: unset;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 24px;
-	height: 24px;
-	padding: 4px;
-	box-sizing: border-box;
-	cursor: ${t=>t.disabled?"not-allowed":"pointer"};
-	background: transparent;
-
-	${t=>t.disabled?"":`\n\t\t:hover {\n\t\t\tbackground-color: ${n.background.inverse};\n\t\t}\n\t\t:active {\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t}\n\t`}
-`,o=t.div`
-	width: 1px;
-	height: 12px;
-	background: rgba(255, 255, 255, 0.3);
-	flex-shrink: 0;
-`;export{e as Container,o as Divider,i as IconHalf};

package/dist/esm/components/dual-icon-button/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DualIconButton';
-export type { DualIconButtonProps } from './model';

package/dist/esm/components/dual-icon-button/model.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export interface DualIconButtonProps {
-    LeftIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    RightIcon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-    onLeftClick?: React.MouseEventHandler<HTMLButtonElement>;
-    onRightClick?: React.MouseEventHandler<HTMLButtonElement>;
-    disabled?: boolean;
-    leftIconColor?: string;
-    rightIconColor?: string;
-    id?: string;
-    style?: React.CSSProperties;
-}