@bikdotai/bik-component-library 0.0.786-beta.13 → 0.0.786-beta.2

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 (37) hide show
  1. package/dist/cjs/assets/icons/Icons.stories.d.ts +31 -0
  2. package/dist/cjs/components/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
  3. package/dist/cjs/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +13 -18
  4. package/dist/cjs/components/icon-button/IconButton.js +1 -1
  5. package/dist/cjs/components/icon-button/IconButton.styled.d.ts +0 -1
  6. package/dist/cjs/components/icon-button/IconButton.styled.js +3 -3
  7. package/dist/cjs/components/icon-button/model.d.ts +0 -5
  8. package/dist/cjs/components/input/Input.js +1 -1
  9. package/dist/cjs/components/input/Input.model.d.ts +0 -1
  10. package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js +1 -1
  11. package/dist/cjs/components/multi-level-dropdown/MenuItem.js +1 -1
  12. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
  13. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -8
  14. package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js +28 -31
  15. package/dist/cjs/components/whats-new/WhatsNew.d.ts +0 -2
  16. package/dist/cjs/components/whats-new/WhatsNew.js +1 -1
  17. package/dist/cjs/components/whats-new/WhatsNew.types.d.ts +0 -2
  18. package/dist/cjs/components/whats-new/WhatsNewButton.js +1 -1
  19. package/dist/esm/assets/icons/Icons.stories.d.ts +31 -0
  20. package/dist/esm/components/bik-layout/BikSidebarV2/BikSidebarV2.js +1 -1
  21. package/dist/esm/components/bik-layout/BikSidebarV2/SidebarV2Styles.js +16 -21
  22. package/dist/esm/components/icon-button/IconButton.js +1 -1
  23. package/dist/esm/components/icon-button/IconButton.styled.d.ts +0 -1
  24. package/dist/esm/components/icon-button/IconButton.styled.js +1 -1
  25. package/dist/esm/components/icon-button/model.d.ts +0 -5
  26. package/dist/esm/components/input/Input.js +1 -1
  27. package/dist/esm/components/input/Input.model.d.ts +0 -1
  28. package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js +1 -1
  29. package/dist/esm/components/multi-level-dropdown/MenuItem.js +1 -1
  30. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js +1 -1
  31. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts +2 -8
  32. package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js +26 -29
  33. package/dist/esm/components/whats-new/WhatsNew.d.ts +0 -2
  34. package/dist/esm/components/whats-new/WhatsNew.js +1 -1
  35. package/dist/esm/components/whats-new/WhatsNew.types.d.ts +0 -2
  36. package/dist/esm/components/whats-new/WhatsNewButton.js +1 -1
  37. package/package.json +1 -1
@@ -0,0 +1,31 @@
1
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
2
+ declare const _default: ComponentMeta<({ color, size, }: {
3
+ color?: string | undefined;
4
+ size?: number | undefined;
5
+ }) => import("react/jsx-runtime").JSX.Element>;
6
+ export default _default;
7
+ export declare const AllIcons: ComponentStory<({ color, size, }: {
8
+ color?: string | undefined;
9
+ size?: number | undefined;
10
+ }) => import("react/jsx-runtime").JSX.Element>;
11
+ export declare const ActiveChecklist: ComponentStory<any>;
12
+ export declare const CheckIndicator: ComponentStory<any>;
13
+ export declare const CompletedChecklist: ComponentStory<any>;
14
+ export declare const InactiveChecklist: ComponentStory<any>;
15
+ export declare const ProgressBadge: ComponentStory<any>;
16
+ export declare const Redirect2: ComponentStory<any>;
17
+ export declare const SearchIconComponent: ComponentStory<any>;
18
+ export declare const SmallCheck: ComponentStory<any>;
19
+ export declare const Customise: ComponentStory<any>;
20
+ export declare const Enable: ComponentStory<any>;
21
+ export declare const GoLive: ComponentStory<any>;
22
+ export declare const Headset: ComponentStory<any>;
23
+ export declare const ListChecks: ComponentStory<any>;
24
+ export declare const Marketing: ComponentStory<any>;
25
+ export declare const Nudges: ComponentStory<any>;
26
+ export declare const OnboardingLogoStory: ComponentStory<any>;
27
+ export declare const OrderTracking: ComponentStory<any>;
28
+ export declare const PlusIconComponent: ComponentStory<any>;
29
+ export declare const Shopping: ComponentStory<any>;
30
+ export declare const Support: ComponentStory<any>;
31
+ export declare const Training: ComponentStory<any>;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o}=i,r=n,l=o;return e.jsx(e.Fragment,{children:t?e.jsx(l,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(r,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,k,y,S,M;return e.jsx(u.SibeBarV2MenuItem,{children:e.jsxs(u.SidebarMainMenu,Object.assign({id:(null===(h=null===(g=t.displayName)||void 0===g?void 0:g.split(" "))||void 0===h?void 0:h.join(""))||t.key.toString(),onClick:()=>!l&&s(t),onMouseEnter:()=>{r(t)},onMouseLeave:p,onFocus:()=>{},"aria-hidden":"true"},{children:[t.isNew&&e.jsx(u.SidebarNewTag,Object.assign({isLastSticky:t.isLastSticky},{children:"NEW"})),t.isLocked&&e.jsx(u.SidebarLockedChannel,Object.assign({isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs(u.SidebarMenuItemInner,Object.assign({id:(null===(y=null===(k=t.displayName)||void 0===k?void 0:k.split(" "))||void 0===y?void 0:y.join(""))+"_sub"||t.key.toString()+"_sub",isActive:(null==d?void 0:d.key)===t.key,isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky,isHovered:t.key===(null==c?void 0:c.key),isNew:t.isNew},{children:[e.jsx(a,{icon:t.icon,isActive:t.key==(null==d?void 0:d.key),activeStateIcon:null!==(S=t.activeIcon)&&void 0!==S?S:{},hoverStateIcon:null!==(M=t.hoverIcon)&&void 0!==M?M:{},isHovered:t.key==(null==c?void 0:c.key)||t.key==(null==v?void 0:v.key)}),e.jsx(u.SidebarMenuItemContainer,{children:e.jsx(u.SidebarMenuItemText,Object.assign({isActive:(null==t?void 0:t.key)===(null==d?void 0:d.key)},{children:t.displayName}))})]}),o)]}),o)})};exports.BikSidebarV2=n=>{const{logoSvg:s,allMenuList:a,activeMainMenu:v,activeSubMenu:p,router:g,onClickingMainMenu:h,onClickingSubMenu:k,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:S,popupMinHeight:M,isNewSidebar:m,menuStyle:b}=n,[j,x]=t.useState(v),[L,C]=t.useState(),[w,f]=t.useState(p),[I,H]=t.useState(!1),[O,N]=t.useState(),[B,P]=t.useState(),[E,q]=t.useState(),A=t.useRef(null),F=t.useMemo((()=>a.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[a]);t.useEffect((()=>{x(v)}),[v]),t.useEffect((()=>{f(p)}),[p]);const V=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(N(void 0),C(void 0),H(!0),x(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?f(null==e?void 0:e.children[0]):f({}),C(void 0),setTimeout((()=>{H(!1)}),1e3))}),[h]),_=t.useCallback((e=>{var i,n;if(D(),C(void 0),N(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&P(i),N(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const i=R(t,e);q(i)}C(e)}}),[]),R=(e,i)=>{const n=e.getBoundingClientRect();let t=n.top;if(window.innerHeight<=768)return t;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;t=n.top+e-200}return t};t.useEffect((()=>{const e=()=>{const e=z();e&&P(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},D=t.useCallback((()=>{A.current&&(clearTimeout(A.current),A.current=null)}),[]),U=t.useCallback((()=>{D(),A.current=setTimeout((()=>{C(void 0),N(void 0)}),150)}),[D]),z=()=>{var e,i;if(O){const n=(null===(i=null===(e=O.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||O.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=M?M:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e.jsxs(u.SideBarV2Container,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(u.MainSideBarV2MenuWrapper,Object.assign({style:b},{children:[null==a?void 0:a.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,Object.assign({href:i.path,router:g},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:I,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:O,onMouseLeaveMenuItem:U})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:I,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:O,onMouseLeaveMenuItem:U}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==O?void 0:O.children)||void 0===o?void 0:o.length)&&e.jsx(l.SidebarV2Popup,{top:null!=B?B:void 0,menuList:null==O?void 0:O.children,onClickingPopupMenu:e=>{S&&S(e),N(void 0)},onMouseEnterOnMenu:D,onMouseLeaveOnMenu:U}),(null===(s=null==L?void 0:L.children)||void 0===s?void 0:s.length)&&e.jsx(d.SimpleSidebarV2,{menuList:null==L?void 0:L.children,width:200,activeMenu:w,onMouseEnterOnMenu:D,onMouseLeaveOnMenu:()=>C(void 0),left:78,postion:"fixed",header:L.displayName,theme:"brand",router:g,showAccessUpgradePanel:L.showAccessUpgradePanel,onMenuClick:(e,i)=>{f(e),x(L),C(void 0),N(void 0),i&&k(e)},onUpgrade:y,top:m&&E||0,isNewSidebar:m})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(u.SibeBarV2MenuItem,{children:e.jsx(u.SidebarMainMenu,{children:e.jsx(u.SidebarMenuItemInner,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===F?0:1===F?64:128},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))})})]}))]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("../../../assets/icons/Bik_logo.svg.js"),n=require("../../../assets/icons/locked.svg.js"),t=require("react"),o=require("../../progress-bar/CircularProgressBar.js"),s=require("../../../constants/Theme.js"),r=require("../../navigation-hyperlink/NavigationHyperlink.js"),l=require("./SidebarV2Popup.js"),u=require("./SidebarV2Styles.js"),d=require("./SimpleSidebarV2.js");const a=i=>{const{icon:n,isActive:t,activeStateIcon:o,hoverStateIcon:r,isHovered:l}=i,u=n,d=o,a=r;return e.jsx(e.Fragment,{children:t&&l||t?e.jsx(d,{width:16,height:16,color:s.COLORS.content.primaryInverse}):l?e.jsx(a,{width:16,height:16,color:s.COLORS.content.primaryInverse}):e.jsx(u,{width:16,height:16,color:s.COLORS.content.secondaryInverse})})},c=i=>{let{option:t,index:o,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:l,mainActiveMenu:d,hoveredComp:c,popupMenu:v,onMouseLeaveMenuItem:p}=i;var g,h,S,y,k,m;return e.jsx(u.SibeBarV2MenuItem,{children:e.jsxs(u.SidebarMainMenu,Object.assign({id:(null===(h=null===(g=t.displayName)||void 0===g?void 0:g.split(" "))||void 0===h?void 0:h.join(""))||t.key.toString(),onClick:()=>!l&&s(t),onMouseEnter:()=>{r(t)},onMouseLeave:p,onFocus:()=>{},"aria-hidden":"true"},{children:[t.isNew&&e.jsx(u.SidebarNewTag,Object.assign({isLastSticky:t.isLastSticky},{children:"NEW"})),t.isLocked&&e.jsx(u.SidebarLockedChannel,Object.assign({isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky},{children:e.jsx(n.default,{height:16,width:16})})),e.jsxs(u.SidebarMenuItemInner,Object.assign({id:(null===(y=null===(S=t.displayName)||void 0===S?void 0:S.split(" "))||void 0===y?void 0:y.join(""))+"_sub"||t.key.toString()+"_sub",isActive:(null==d?void 0:d.key)===t.key,isLastSticky:t.isLastSticky,is2ndLastSticky:t.is2ndLastSticky,isHovered:t.key===(null==c?void 0:c.key),isNew:t.isNew},{children:[e.jsx(a,{icon:t.icon,isActive:t.key==(null==d?void 0:d.key),activeStateIcon:null!==(k=t.activeIcon)&&void 0!==k?k:{},hoverStateIcon:null!==(m=t.hoverIcon)&&void 0!==m?m:{},isHovered:t.key==(null==c?void 0:c.key)||t.key==(null==v?void 0:v.key)}),e.jsx(u.SidebarMenuItemContainer,{children:e.jsx(u.SidebarMenuItemText,Object.assign({isActive:(null==t?void 0:t.key)===(null==d?void 0:d.key)},{children:t.displayName}))})]}),o)]}),o)})};exports.BikSidebarV2=n=>{const{logoSvg:s,allMenuList:a,activeMainMenu:v,activeSubMenu:p,router:g,onClickingMainMenu:h,onClickingSubMenu:S,onClickingAccessUpgradePanel:y,onClickingPopupMenuItem:k,popupMinHeight:m,isNewSidebar:M,menuStyle:b}=n,[j,x]=t.useState(v),[L,C]=t.useState(),[w,I]=t.useState(p),[f,O]=t.useState(!1),[H,N]=t.useState(),[B,P]=t.useState(),[E,q]=t.useState(),A=t.useRef(null),F=t.useMemo((()=>a.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[a]);t.useEffect((()=>{x(v)}),[v]),t.useEffect((()=>{I(p)}),[p]);const V=t.useCallback((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(N(void 0),C(void 0),O(!0),x(e),e.path||h(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?I(null==e?void 0:e.children[0]):I({}),C(void 0),setTimeout((()=>{O(!1)}),1e3))}),[h]),_=t.useCallback((e=>{var i,n;if(D(),C(void 0),N(void 0),"popup"==(null==e?void 0:e.layout)){const i=z();i&&P(i),N(e)}else{const t=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(t){const i=R(t,e);q(i)}C(e)}}),[]),R=(e,i)=>{const n=e.getBoundingClientRect();let t=n.top;if(window.innerHeight<=768)return t;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;t=n.top+e-200}return t};t.useEffect((()=>{const e=()=>{const e=z();e&&P(e),T()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const T=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},D=t.useCallback((()=>{A.current&&(clearTimeout(A.current),A.current=null)}),[]),U=t.useCallback((()=>{D(),A.current=setTimeout((()=>{C(void 0),N(void 0)}),150)}),[D]),z=()=>{var e,i;if(H){const n=(null===(i=null===(e=H.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||H.key.toString()+"_sub",t=document.getElementById(n);if(t){const e=t.getBoundingClientRect();let i=e.top;const n=null!=m?m:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e.jsxs(u.SideBarV2Container,{children:[e.jsx("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:s||e.jsx(i.default,{})})),e.jsxs(u.MainSideBarV2MenuWrapper,Object.assign({style:b},{children:[null==a?void 0:a.map(((i,n)=>{var o,s;return e.jsxs(t.Fragment,{children:[i.path?e.jsx(r.NavigationHyperlink,Object.assign({href:i.path,router:g},{children:e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U})})):e.jsx(c,{option:i,index:n,onClickMainMenuLogic:V,setHandleHoverForFullLayout:_,isDisabled:f,setHoveredComp:C,setPopupMenu:N,mainActiveMenu:j,hoveredComp:L,popupMenu:H,onMouseLeaveMenuItem:U}),e.jsxs(e.Fragment,{children:["popup"===i.layout&&(null===(o=null==H?void 0:H.children)||void 0===o?void 0:o.length)&&e.jsx(l.SidebarV2Popup,{top:null!=B?B:void 0,menuList:null==H?void 0:H.children,onClickingPopupMenu:e=>{k&&k(e),N(void 0)},onMouseEnterOnMenu:D,onMouseLeaveOnMenu:U}),(null===(s=null==L?void 0:L.children)||void 0===s?void 0:s.length)&&e.jsx(d.SimpleSidebarV2,{menuList:null==L?void 0:L.children,width:200,activeMenu:w,onMouseEnterOnMenu:D,onMouseLeaveOnMenu:()=>C(void 0),left:78,postion:"fixed",header:L.displayName,theme:"brand",router:g,showAccessUpgradePanel:L.showAccessUpgradePanel,onMenuClick:(e,i)=>{I(e),x(L),C(void 0),N(void 0),i&&S(e)},onUpgrade:y,top:M&&E||0,isNewSidebar:M})]})]},n)})),"number"==typeof n.onboardingPercentage&&e.jsx(u.SibeBarV2MenuItem,{children:e.jsx(u.SidebarMainMenu,{children:e.jsx(u.SidebarMenuItemInner,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===F?0:1===F?64:128},{children:e.jsx(o.default,{percentage:n.onboardingPercentage,width:48})}))})})]}))]})};
@@ -25,9 +25,9 @@
25
25
  }
26
26
  `,a=o.default.div`
27
27
  margin: 0px 0px 16px;
28
- padding-bottom: 8px;
29
28
  `,d=o.default.div``,s=o.default.div`
30
- padding: 0px 6px;
29
+ overflow-y: auto;
30
+ padding: 0px 8px;
31
31
  margin-bottom: 6px;
32
32
  > * {
33
33
  gap: 4px;
@@ -64,7 +64,7 @@
64
64
  z-index: 1;
65
65
  }
66
66
  `}}
67
- `,x=o.default.div`
67
+ `,c=o.default.div`
68
68
  display: flex;
69
69
  flex-direction: column;
70
70
  border-radius: 10px;
@@ -93,27 +93,23 @@
93
93
  `}}
94
94
 
95
95
  ${t=>{let{isActive:r,isHovered:o}=t;return r&&o&&e.css`
96
- border-radius: 8px;
97
- border: 1px solid ${i.BASE_COLORS.brand[700]};
98
- background-color: ${i.BASE_COLORS.brand[800]};
96
+ background-color: ${i.BASE_COLORS.brand[700]};
99
97
  `}}
100
98
 
101
99
 
102
100
  ${t=>{let{isLastSticky:i}=t;return i&&e.css`
103
101
  @media (min-height: 768px) {
104
102
  position: absolute;
105
- bottom: 72px;
106
- left: 6px;
107
- right: 6px;
103
+ bottom: 64px;
104
+ width: 85%;
108
105
  }
109
106
  `}}
110
107
 
111
108
  ${t=>{let{is2ndLastSticky:i}=t;return i&&e.css`
112
109
  @media (min-height: 768px) {
113
110
  position: absolute;
114
- bottom: 8px;
115
- left: 6px;
116
- right: 6px;
111
+ bottom: 0px;
112
+ width: 85%;
117
113
  }
118
114
  `}}
119
115
 
@@ -121,15 +117,14 @@
121
117
  @media (min-height: 768px) {
122
118
  position: absolute;
123
119
  bottom: ${i}px;
124
- left: 6px;
125
- right: 6px;
120
+ width: 85%;
126
121
  }
127
122
  `}}
128
- `,c=o.default.div`
123
+ `,u=o.default.div`
129
124
  display: flex;
130
125
  flex-direction: row;
131
126
  cursor: pointer;
132
- `,u=o.default(t.BodyTiny)`
127
+ `,x=o.default(t.BodyTiny)`
133
128
  user-select: none;
134
129
  color: ${e=>{let{isActive:t}=e;return t?i.COLORS.content.primaryInverse:i.COLORS.content.secondaryInverse}};
135
130
  margin-bottom: 0px;
@@ -166,7 +161,7 @@
166
161
  position: absolute;
167
162
  right: 100%;
168
163
  top: 0;
169
- width: 6px;
164
+ width: 24px;
170
165
  height: 100%;
171
166
  }
172
167
  }
@@ -284,4 +279,4 @@
284
279
  border-radius: 8px;
285
280
  }
286
281
  }
287
- `;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=c,exports.SidebarMenuItemInner=x,exports.SidebarMenuItemText=u,exports.SidebarNewTag=p,exports.SidebarV2PopupContainer=g,exports.SimpleSidebarV2Container=l;
282
+ `;exports.MainSideBarV2MenuWrapper=a,exports.SibeBarV2MenuItem=d,exports.SideBarV2Container=n,exports.SidebarLockedChannel=b,exports.SidebarMainMenu=s,exports.SidebarMenuItemContainer=u,exports.SidebarMenuItemInner=c,exports.SidebarMenuItemText=x,exports.SidebarNewTag=p,exports.SidebarV2PopupContainer=g,exports.SimpleSidebarV2Container=l;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),d=require("./theme.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(o);const s=o.forwardRef(((o,l)=>{var{id:s,iconButtonType:c="default",Icon:a,height:u=20,width:b=20,bordered:y,disabled:p,isSelected:j,style:g,svgStyle:h,iconColor:f,iconPadding:v,disabledTooltip:B}=o,I=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const T=d.getIconColor(c,p,j),q=t.jsx(r.IconButton,Object.assign({id:s,ref:l,style:g,iconButtonType:c,bordered:y,disabled:p,isSelected:j,iconPadding:v},I,{children:n.default.createElement(a,{height:u,width:b,color:f||T,style:Object.assign({display:"block"},null!=h?h:{})})}));return p&&B?t.jsx(i.Tooltip,Object.assign({body:B},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:q}))})):q}));s.displayName="IconButton",exports.IconButton=s;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),o=require("react"),i=require("../tooltips/Tooltip.js"),r=require("./IconButton.styled.js"),l=require("./theme.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=s(o);const n=o.forwardRef(((o,s)=>{var{id:n,iconButtonType:c="default",Icon:a,height:u=20,width:b=20,bordered:y,disabled:p,isSelected:j,style:h,svgStyle:f,iconColor:g,disabledTooltip:v}=o,B=e.__rest(o,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const I=l.getIconColor(c,p,j),T=t.jsx(r.IconButton,Object.assign({id:n,ref:s,style:h,iconButtonType:c,bordered:y,disabled:p,isSelected:j},B,{children:d.default.createElement(a,{height:u,width:b,color:g||I,style:Object.assign({display:"block"},null!=f?f:{})})}));return p&&v?t.jsx(i.Tooltip,Object.assign({body:v},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:T}))})):T}));n.displayName="IconButton",exports.IconButton=n;
@@ -3,5 +3,4 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
3
3
  bordered?: boolean | undefined;
4
4
  iconButtonType: IconButtonType;
5
5
  isSelected?: boolean | undefined;
6
- iconPadding?: number | undefined;
7
6
  }, never>;
@@ -1,3 +1,3 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),n=require("../../constants/Theme.js"),e=require("./theme.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const r=o(t).default.button`
2
- ${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${void 0!==t.iconPadding?t.iconPadding:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${e.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
3
- `;exports.IconButton=r;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js"),n=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const o=r(t).default.button`
2
+ ${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${e.COLORS.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${n.generateBackgroundColor(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
3
+ `;exports.IconButton=o;
@@ -40,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
40
40
  */
41
41
  isSelected?: boolean;
42
42
  iconColor?: string;
43
- /**
44
- * Custom padding for the icon button container
45
- * @default 6
46
- */
47
- iconPadding?: number;
48
43
  disabledTooltip?: string;
49
44
  }
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,x,j,f,b,m;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:I,maxCharLimit:T,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:F,onChangeText:M,value:P,noErrorHint:R,reset:z,rangeValidation:D,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:U,labelTextBold:V,truncateText:$,maxCharLimitPosition:J,hightlightInputColor:Q,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1,allowUnsafeInput:ie,leftIconStyle:se}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),le=null==C?void 0:C.icon,re=null==O?void 0:O.icon,[ae,oe]=n.useState(!1),[ue,ce]=n.useState(!1),[de,he]=n.useState(),ve="x-small"===q?"12px":"small"===q?"18px":"22px",pe=n.useContext(u.InputStyleContext),[ge,xe]=n.useState(""),je=n.useRef(null),fe=null!=h?h:je;n.useEffect((()=>{xe(P||""),!P&&W&&(fe.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;fe.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,fe.current))}),[fe]),n.useEffect((()=>{const e=fe.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",Ce,{passive:!1}),()=>{e.removeEventListener("wheel",Ce)}}),[]),n.useEffect((()=>{z&&xe("")}),[z]),n.useEffect((()=>{var e;ce(!!d.isActive),d.isActive&&(null===(e=fe.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{he(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;oe(!1),("invalid"===d.state||de||"disabled-invalid"===d.state)&&oe(!0),"active"===d.state&&(null===(e=fe.current)||void 0===e||e.focus())}),[d.state,de]),n.useEffect((()=>{oe(!!de||"invalid"===d.state)}),[de,d.state]);const be=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},me=()=>"zip"===E?6:2e3,ye=e=>{const t=0!==T?T:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ce=e=>{e.preventDefault()},Oe=e=>{let t=e.target.value;const n=0!==T?T+1:me(),i=te;if(!ie&&s.shouldSanitizeForType(E)&&(t=s.sanitizeUnsafeInput(t)),!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||xe(t||""),i&&t&&t.length<i)return;M(t,e),W&&(fe.current.style.height=`${fe.current.scrollHeight}px`,t||(fe.current.style.height=G||"48px"));const l=H||s.validateInput;if(!l||!s.isFunction(l))return;const[r,a]=l(t,E,D);oe(!r),he(d.errorMessage?d.errorMessage:a)},Ie=e=>{var t;d.skipFocus||ce(!0),be(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Te=e=>{var t;d.skipFocus||ce(!1),be(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Se=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==pe?void 0:pe.input)&&void 0!==t?t:{},ref:fe,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:ge,onFocus:e=>Ie(e),onBlur:e=>Te(e),placeholder:y||"Enter here",onChange:Oe,onClick:e=>be(d.onClick),onKeyDown:e=>ye(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:ge,ref:fe,onFocus:e=>Ie(e),onBlur:e=>Te(e),onClick:e=>be(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:Oe,onKeyDown:e=>ye(e),maxLength:T>0?T:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==pe?void 0:pe.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!de)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!de},{children:[!!de&&e.jsx(o.default,{width:16,height:16}),de||w]})),T>0&&"BOTTOM"===J&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(g=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==g?g:0,"/",T]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||ue,isInvalid:ae,style:null!==(j=null!==(x=null==pe?void 0:pe.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:Q,hideBorder:Z},{children:[!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ve,onClick:()=>be(null==C?void 0:C.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(f=null==pe?void 0:pe.IconHolder)&&void 0!==f?f:{}),se)},{children:e.jsx(le,{})})),!!F&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:F})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:U,autoGrow:W},{children:Se()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Se()})),!!re&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:ve,onClick:()=>be(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(re,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>be(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!I||!!T)&&e.jsxs(c.InputHeader,Object.assign({invalid:ae},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[I,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[I,S?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(l.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:ae?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),T>0&&"TOP"===J&&e.jsxs(c.MaxCharStyle,{children:[null!==(m=null===(b=(null!=P?P:"").toString())||void 0===b?void 0:b.length)&&void 0!==m?m:0,"/",T]})]}))]}))}));d.displayName="Input",exports.Input=d;
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/info.svg.js"),n=require("react"),i=require("../button/Button.js"),s=require("./Input-helper.js"),l=require("../tooltips/Tooltip.js"),r=require("../TypographyStyle.js"),a=require("../../constants/Theme.js"),o=require("../../assets/icons/errorInfo.svg.js"),u=require("./context/InputStyleProvider.js"),c=require("./Input.styled.js");const d=n.forwardRef(((d,h)=>{var v,p,g,x,j,f,m,b;const{placeholder:y,leftIcon:C,rightIcon:O,labelText:T,maxCharLimit:I,isRequired:S,hintText:w,type:E,state:k,validate:H,variant:q,button:B,suffixText:L,prefixText:F,onChangeText:M,value:P,noErrorHint:R,reset:z,rangeValidation:D,noKeyDownChange:A,version:K,noMaxCharCheck:N,labelElement:_,autoGrow:W,minHeight:G,maxHeight:U,labelTextBold:V,truncateText:$,maxCharLimitPosition:J,hightlightInputColor:Q,onKeyDownEvent:X,hideInputHeader:Y,hideBorder:Z,inputWrapperStyles:ee,minCharsToTrigger:te,isDisabled:ne=!1,allowUnsafeInput:ie}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},d),se=null==C?void 0:C.icon,le=null==O?void 0:O.icon,[re,ae]=n.useState(!1),[oe,ue]=n.useState(!1),[ce,de]=n.useState(),he="x-small"===q?"12px":"small"===q?"18px":"22px",ve=n.useContext(u.InputStyleContext),[pe,ge]=n.useState(""),xe=n.useRef(null),je=null!=h?h:xe;n.useEffect((()=>{ge(P||""),!P&&W&&(je.current.style.height=G||"48px")}),[P]),n.useEffect((()=>{var e;je.current&&(null===(e=d.onReferenceInit)||void 0===e||e.call(d,je.current))}),[je]),n.useEffect((()=>{const e=je.current;if(e&&["phonenumber","zip","number"].includes(E))return e.addEventListener("wheel",ye,{passive:!1}),()=>{e.removeEventListener("wheel",ye)}}),[]),n.useEffect((()=>{z&&ge("")}),[z]),n.useEffect((()=>{var e;ue(!!d.isActive),d.isActive&&(null===(e=je.current)||void 0===e||e.focus())}),[d.isActive]),n.useEffect((()=>{de(d.errorMessage)}),[d.errorMessage]),n.useEffect((()=>{var e;ae(!1),("invalid"===d.state||ce||"disabled-invalid"===d.state)&&ae(!0),"active"===d.state&&(null===(e=je.current)||void 0===e||e.focus())}),[d.state,ce]),n.useEffect((()=>{ae(!!ce||"invalid"===d.state)}),[ce,d.state]);const fe=function(e){if(s.isFunction(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},me=()=>"zip"===E?6:2e3,be=e=>{const t=0!==I?I:me(),n=te,i=e.target.value;X&&(!i.length||i.length>=n)&&X(e),A||i.length&&!(i.length>=n)||M(P||"",e),N||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},ye=e=>{e.preventDefault()},Ce=e=>{let t=e.target.value;const n=0!==I?I+1:me(),i=te;if(!ie&&s.shouldSanitizeForType(E)&&(t=s.sanitizeUnsafeInput(t)),!N&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),d.textControl||ge(t||""),i&&t&&t.length<i)return;M(t,e),W&&(je.current.style.height=`${je.current.scrollHeight}px`,t||(je.current.style.height=G||"48px"));const l=H||s.validateInput;if(!l||!s.isFunction(l))return;const[r,a]=l(t,E,D);ae(!r),de(d.errorMessage?d.errorMessage:a)},Oe=e=>{var t;d.skipFocus||ue(!0),fe(null===(t=d.onFocus)||void 0===t?void 0:t.call(d,e))},Te=e=>{var t;d.skipFocus||ue(!1),fe(null===(t=d.onBlur)||void 0===t?void 0:t.call(d,e))},Ie=()=>{var t;return e.jsxs(e.Fragment,{children:["multiline"!==E&&e.jsx("input",{className:$?"truncate-class":"","data-test":d["data-test"],id:d.id,style:null!==(t=null==ve?void 0:ve.input)&&void 0!==t?t:{},ref:je,disabled:ne,type:["phonenumber","zip","number"].includes(E)?"number":E,value:pe,onFocus:e=>Oe(e),onBlur:e=>Te(e),placeholder:y||"Enter here",onChange:Ce,onClick:e=>fe(d.onClick),onKeyDown:e=>be(e)}),"multiline"===E&&e.jsx("textarea",{"data-test":d["data-test"],value:pe,ref:je,onFocus:e=>Oe(e),onBlur:e=>Te(e),onClick:e=>fe(d.onClick),disabled:ne,placeholder:y||"Enter here",onChange:Ce,onKeyDown:e=>be(e),maxLength:I>0?I:void 0})]})};return e.jsxs(c.RootContainer,Object.assign({width:d.width,height:d.height,state:k,type:E,style:null!==(v=null==ve?void 0:ve.RootContainer)&&void 0!==v?v:{}},{children:[e.jsxs("div",Object.assign({className:"flex-align-center"},{children:[!R&&(!!w||!!ce)&&e.jsxs(c.InputFooter,Object.assign({invalid:!!ce},{children:[!!ce&&e.jsx(o.default,{width:16,height:16}),ce||w]})),I>0&&"BOTTOM"===J&&e.jsxs(c.MaxCharStyle,Object.assign({position:"BOTTOM"},{children:[null!==(g=null===(p=(null!=P?P:"").toString())||void 0===p?void 0:p.length)&&void 0!==g?g:0,"/",I]}))]})),e.jsxs(c.InputWrapper,Object.assign({variant:q,state:k,width:d.width,isActive:"active"===k||oe,isInvalid:re,style:null!==(j=null!==(x=null==ve?void 0:ve.InputWrapper)&&void 0!==x?x:ee)&&void 0!==j?j:{},version:K,height:d.height,hightlightInputColor:Q,hideBorder:Z},{children:[!!se&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(null==C?void 0:C.callback),isLeft:!0,style:null!==(f=null==ve?void 0:ve.IconHolder)&&void 0!==f?f:{}},{children:e.jsx(se,{})})),!!F&&e.jsx(c.PrefixHolder,Object.assign({variant:q},{children:F})),"default"===q&&e.jsx(c.InputContainer,Object.assign({height:d.height,type:d.type,minHeight:G,maxHeight:U,autoGrow:W},{children:Ie()})),["x-small","small"].includes(q)&&e.jsx(c.InputContainerSmall,Object.assign({height:d.height,type:d.type},{children:Ie()})),!!le&&e.jsx(c.IconHolder,Object.assign({variant:q,iconSize:he,onClick:()=>fe(null==O?void 0:O.callback),isLeft:!1},{children:e.jsx(le,{})})),!!L&&e.jsx(c.SuffixHolder,Object.assign({variant:q},{children:L})),B&&B.text&&e.jsx(i.Button,{buttonText:B.text,onClick:()=>fe(null==B?void 0:B.onClick)}),B&&B.buttonProps&&e.jsx(i.Button,Object.assign({},B.buttonProps))]})),!Y&&(!!T||!!I)&&e.jsxs(c.InputHeader,Object.assign({invalid:re},{children:[_&&_,e.jsxs("div",Object.assign({className:"label__container"},{children:[V?e.jsxs(r.TitleSmall,{children:[T,S?e.jsx("span",{children:"*"}):""]}):e.jsxs(r.BodySecondary,{children:[T,S?e.jsx("span",{children:"*"}):""]}),d.tooltipText&&e.jsx(l.Tooltip,Object.assign({body:d.tooltipText,placement:"top"},{children:e.jsx("span",{children:e.jsx(t.default,{style:{marginTop:-3},width:18,height:18,color:re?a.COLORS.content.negative:a.COLORS.content.primary})})}))]})),I>0&&"TOP"===J&&e.jsxs(c.MaxCharStyle,{children:[null!==(b=null===(m=(null!=P?P:"").toString())||void 0===m?void 0:m.length)&&void 0!==b?b:0,"/",I]})]}))]}))}));d.displayName="Input",exports.Input=d;
@@ -14,7 +14,6 @@ export interface InputProps {
14
14
  icon: React.FC;
15
15
  callback?: () => void;
16
16
  };
17
- leftIconStyle?: React.CSSProperties;
18
17
  rightIcon?: {
19
18
  icon: React.FC;
20
19
  callback?: () => void;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:a,maxLevels:d,hideGroupLabel:c,currentLevel:x,renderNestedMenu:j,version:v}=s;return e.jsxs(o.GroupedMenuListContainer,Object.assign({version:v},{children:[!c&&e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:l,option:r,parents:p,allowParentSelection:a,maxLevels:d,currentLevel:x,renderNestedMenu:j,version:v},t)))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("../../constants/Theme.js"),t=require("../TypographyStyle.js"),n=require("./MenuItem.js"),o=require("./MultiLevelDropdown.styled.js");exports.GroupedMenuList=s=>{let{width:i,onDropdownItemClick:l,option:u,parents:p,allowParentSelection:d,maxLevels:a,hideGroupLabel:c,currentLevel:x,renderNestedMenu:j,version:m}=s;return e.jsxs(o.GroupedMenuListContainer,{children:[!c&&e.jsx(t.BodyTiny,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.COLORS.content.placeholder},{children:u.label})),u.options.map(((r,t)=>e.jsx(n.MenuItem,{width:i,onDropdownItemClick:l,option:r,parents:p,allowParentSelection:d,maxLevels:a,currentLevel:x,renderNestedMenu:j,version:m},t)))]})};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({version:g,onMouseEnter:e=>{k&&(f(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();T({top:t.top,left:t.right}),w.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{f(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!d||null!==(e=c.disabled)&&void 0!==e&&e||q&&!p||d(c,u)})()},id:"menuItemWrapper",style:{cursor:null!==(j=c.disabled)&&void 0!==j&&j?"not-allowed":"pointer",backgroundColor:null!==(C=c.disabled)&&void 0!==C&&C?i.COLORS.surface.standard:"transparent"}},{children:[c.customComponent?c.customComponent:e.jsxs(o.MenuItemContainer,Object.assign({isSelected:c.selected,isSubMenuOpen:y,isHovered:R,isDisabled:null!==(b=c.disabled)&&void 0!==b&&b,version:g},{children:[e.jsxs(o.ContentContainer,{children:[c.leadingIcon&&e.jsx(o.LeadingIconContainer,{children:c.leadingIcon}),e.jsxs("div",{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:null!==(x=c.disabled)&&void 0!==x&&x?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary}},{children:c.label})),c.subText&&e.jsx(r.BodyTiny,Object.assign({style:{color:null!==(S=c.disabled)&&void 0!==S&&S?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:c.subText}))]})]}),q?e.jsx(o.TrailingIconContainer,{children:e.jsx(t.default,{width:16,height:16,color:!k||null!==(m=c.disabled)&&void 0!==m&&m?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary})}):c.trailingIcon?e.jsx(o.TrailingIconContainer,{children:c.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(L=c.disabled)&&void 0!==L&&L)&&c.children&&c.children.length>0&&k&&y&&e.jsx(o.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(o.StyledSubMenuWrapper,Object.assign({width:a,top:I.top,left:I.left},{children:e.jsx(o.SubMenuListContainer,Object.assign({version:g},{children:h(c.children,[...u,c],v+1)}))}))}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../assets/icons/chevronRight2.svg.js"),n=require("react"),i=require("../../constants/Theme.js"),r=require("../TypographyStyle.js"),o=require("./MultiLevelDropdown.styled.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=s(n);exports.MenuItem=s=>{let{width:a,onDropdownItemClick:d,option:c,parents:u,allowParentSelection:p,maxLevels:O,currentLevel:v,renderNestedMenu:h,version:g}=s;var j,C,b,x,S,m,L;const[y,f]=l.default.useState(!1),[R,M]=l.default.useState(!1),[I,T]=l.default.useState({top:0,left:0}),w=n.useRef({top:0,left:0}),q=!!c.children&&c.children.length>0,k=q&&(void 0===O||v<O);return e.jsxs(o.MenuItemWrapper,Object.assign({onMouseEnter:e=>{k&&(f(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();T({top:t.top,left:t.right}),w.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{f(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!d||null!==(e=c.disabled)&&void 0!==e&&e||q&&!p||d(c,u)})()},id:"menuItemWrapper",style:{cursor:null!==(j=c.disabled)&&void 0!==j&&j?"not-allowed":"pointer",backgroundColor:null!==(C=c.disabled)&&void 0!==C&&C?i.COLORS.surface.standard:"transparent"}},{children:[c.customComponent?c.customComponent:e.jsxs(o.MenuItemContainer,Object.assign({isSelected:c.selected,isSubMenuOpen:y,isHovered:R,isDisabled:null!==(b=c.disabled)&&void 0!==b&&b,version:g},{children:[e.jsxs(o.ContentContainer,{children:[c.leadingIcon&&e.jsx(o.LeadingIconContainer,{children:c.leadingIcon}),e.jsxs("div",{children:[e.jsx(r.BodyCaption,Object.assign({style:{color:null!==(x=c.disabled)&&void 0!==x&&x?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary}},{children:c.label})),c.subText&&e.jsx(r.BodyTiny,Object.assign({style:{color:null!==(S=c.disabled)&&void 0!==S&&S?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.secondary,marginTop:"2px"}},{children:c.subText}))]})]}),q?e.jsx(o.TrailingIconContainer,{children:e.jsx(t.default,{width:16,height:16,color:!k||null!==(m=c.disabled)&&void 0!==m&&m?i.COLORS.content.inactive:c.selected||R?"3.0"===g?i.COLORS.text.primary:i.COLORS.content.positive:i.COLORS.content.primary})}):c.trailingIcon?e.jsx(o.TrailingIconContainer,{children:c.trailingIcon}):e.jsx(e.Fragment,{})]})),!(null!==(L=c.disabled)&&void 0!==L&&L)&&c.children&&c.children.length>0&&k&&y&&e.jsx(o.SubMenuContainer,Object.assign({width:a,className:"submenu",onMouseEnter:()=>M(!0),onMouseLeave:()=>M(!1)},{children:e.jsx(o.StyledSubMenuWrapper,Object.assign({width:a,top:I.top,left:I.left},{children:e.jsx(o.SubMenuListContainer,Object.assign({version:g},{children:h(c.children,[...u,c],v+1)}))}))}))]}))};
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),n=require("react"),t=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(n);exports.MultiLevelDropdown=a=>{let{options:u,width:d,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:x,isDropdownOpen:O,onDropdownOutsideClick:w,allowParentSelection:b,maxLevels:g,hideGroupLabel:v,version:m="1.0"}=a;const L=c.default.useRef(null),[S,y]=n.useState(u),C=e=>{const n=Array.isArray(u)?[...u]:[],t=[];for(;n.length>0;){const r=n.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&t.push(r),r&&"children"in r&&r.children?n.push(...r.children):r&&"options"in r&&r.options&&n.push(...r.options)}const r=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=r(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=r(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));y(r(u))},q=e=>{L.current&&!L.current.contains(e.target)?w&&w(!0):w&&w(!1)};return n.useEffect((()=>{O&&C("")}),[O]),n.useEffect((()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)})),[]),n.useEffect((()=>{y(u)}),[u]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:x},{children:O&&e.jsx("div",Object.assign({ref:L,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"3.0"===m?"4px":"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d,version:m},{children:[p&&e.jsx("div",Object.assign({style:{padding:"3.0"===m?"0px":"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:C,version:"3.0"===m?"3.0":"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d,version:m},{children:(null!=S?S:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:f,options:S,parents:[],allowParentSelection:b,maxLevels:g,hideGroupLabel:v,currentLevel:1,version:m})})),0===(null!=S?S:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"},version:m},{children:"3.0"===m?e.jsx("span",Object.assign({style:{fontSize:"12px",color:r.COLORS.content.placeholder,lineHeight:"16px"}},{children:"No results found!"})):e.jsx(t.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("../zeroState/ZeroState.js"),r=require("../../constants/Theme.js"),s=require("../dropdown/OpenedDropdown/components/searchbox/SearchBox.js"),o=require("../floater/floater.js"),i=require("./MenuList.js"),l=require("./MultiLevelDropdown.styled.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(t);exports.MultiLevelDropdown=a=>{let{options:c,width:d,isSearchable:p,onDropdownItemClick:f,refElement:h,topOffset:j,leftOffset:x,isDropdownOpen:w,onDropdownOutsideClick:b,allowParentSelection:O,maxLevels:g,hideGroupLabel:v,version:m="1.0"}=a;const L=u.default.useRef(null),[S,y]=t.useState(c),C=e=>{const t=Array.isArray(c)?[...c]:[],n=[];for(;t.length>0;){const r=t.shift();r&&r.label.toLowerCase().includes(e.toLowerCase())&&n.push(r),r&&"children"in r&&r.children?t.push(...r.children):r&&"options"in r&&r.options&&t.push(...r.options)}const r=e=>e.map((e=>{if(n.includes(e))return e;if("children"in e&&e.children){const t=r(e.children);if(t.length>0)return Object.assign(Object.assign({},e),{children:t})}if("options"in e&&e.options){const t=r(e.options);if(t.length>0)return Object.assign(Object.assign({},e),{options:t})}return null})).filter((e=>null!==e));y(r(c))},q=e=>{L.current&&!L.current.contains(e.target)?b&&b(!0):b&&b(!1)};return t.useEffect((()=>{w&&C("")}),[w]),t.useEffect((()=>(document.addEventListener("mousedown",q),()=>{document.removeEventListener("mousedown",q)})),[]),t.useEffect((()=>{y(c)}),[c]),e.jsx(o.Floater,Object.assign({refElement:h,topOffset:j,leftOffset:x},{children:w&&e.jsx("div",Object.assign({ref:L,style:{backgroundColor:r.COLORS.surface.standard,zIndex:99999,borderRadius:"3.0"===m?"4px":"8px",whiteSpace:"normal"}},{children:e.jsxs(l.DropdownContainer,Object.assign({width:d,version:m},{children:[p&&e.jsx("div",Object.assign({style:{padding:"4px",width:null!=d?d:"200px"}},{children:e.jsx(s.SearchBox,{onSearch:C,version:"3.0"===m?"3.0":"2.0"})})),e.jsx(l.OptionsContainer,Object.assign({width:d},{children:(null!=S?S:[]).length>0&&e.jsx(i.MenuList,{width:null!=d?d:"200px",onDropdownItemClick:f,options:S,parents:[],allowParentSelection:O,maxLevels:g,hideGroupLabel:v,currentLevel:1,version:m})})),0===(null!=S?S:[]).length&&e.jsx(l.NoResultsContainer,Object.assign({style:{width:null!=d?d:"200px"}},{children:e.jsx(n.ZeroState,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};
@@ -4,19 +4,13 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
4
4
  }, never>;
5
5
  export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
6
6
  width?: string | undefined;
7
- version?: "1.0" | "2.0" | "3.0" | undefined;
8
7
  }, never>;
9
8
  export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
10
9
  width?: string | undefined;
11
- version?: "1.0" | "2.0" | "3.0" | undefined;
12
- }, never>;
13
- export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
14
- version?: "1.0" | "2.0" | "3.0" | undefined;
15
10
  }, never>;
11
+ export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
16
12
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
17
- export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
18
- version?: "1.0" | "2.0" | "3.0" | undefined;
19
- }, never>;
13
+ export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
20
14
  export interface MenuItemContainerProps {
21
15
  isSelected?: boolean;
22
16
  isHovered?: boolean;
@@ -1,101 +1,98 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const i=n.default.div`
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(e);const n=r.default.div`
2
2
  position: relative;
3
3
  border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
4
4
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
5
- padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
6
- `,o=n.default.div`
5
+ padding-bottom: 4px;
6
+ `,o=r.default.div`
7
7
  width: ${e=>{let{width:t}=e;return t||"200px"}};
8
8
  max-width: 300px;
9
9
  max-height: 280px;
10
10
  overflow-y: scroll;
11
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
11
+ padding: 4px 0 0;
12
12
  &::-webkit-scrollbar {
13
13
  width: 0px;
14
14
  }
15
- `,s=n.default.div`
16
- margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
17
- height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
15
+ `,d=r.default.div`
16
+ margin-top: 64px;
17
+ height: 200px;
18
18
  width: ${e=>{let{width:t}=e;return t||"200px"}};
19
- display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
20
- align-items: center;
21
- justify-content: center;
22
- `,d=n.default.div`
19
+ `,a=r.default.div`
23
20
  width: 100%;
24
21
  justify-content: center;
25
22
  cursor: pointer;
26
23
  align-items: center;
27
24
  justify-content: space-between;
28
- margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
29
- `,a=n.default.div`
25
+ margin: 4px 0;
26
+ `,p=r.default.div`
30
27
  z-index: 1000;
31
28
  position: relative;
32
29
  margin: 0px;
33
30
  padding: 0px;
34
31
  width: 100%;
35
- `,p=n.default.div`
32
+ `,s=r.default.div`
36
33
  position: relative;
37
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
34
+ padding: 1px 4px;
38
35
  cursor: pointer;
39
36
  width: 100%;
40
37
  &:hover > .submenu,
41
38
  &:focus-within > .submenu {
42
39
  display: block;
43
40
  }
44
- `,l=n.default.div`
41
+ `,u=r.default.div`
45
42
  position: relative;
46
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
43
+ padding: 4px 8px 4px 8px;
47
44
  transition: background-color 0.2s;
48
45
  width: 100%;
49
- border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
46
+ border-radius: 8px;
50
47
  justify-content: center;
51
- background-color: ${e=>{let{isSelected:r,isHovered:n,isSubMenuOpen:i,isDisabled:o,version:s}=e;return o?t.COLORS.surface.standard:r||i?"3.0"===s?t.COLORS.background.brandLight:t.COLORS.background.positive.light:n?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
52
- color: ${e=>{let{isSelected:r,isSubMenuOpen:n,version:i}=e;return r||n?"3.0"===i?t.COLORS.text.primary:t.COLORS.content.positive:t.COLORS.content.primary}};
48
+ background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.COLORS.surface.standard:i||n?"3.0"===d?t.COLORS.background.brandLight:t.COLORS.background.positive.light:r?t.COLORS.surface.hovered:t.COLORS.surface.standard}};
49
+ color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.COLORS.text.primary:t.COLORS.content.positive:t.COLORS.content.primary}};
53
50
  display: flex;
54
51
  align-items: center;
55
52
  justify-content: space-between;
56
53
 
57
54
  &:hover {
58
- background-color: ${e=>{let{isSelected:r,isDisabled:n,version:i}=e;return n?t.COLORS.surface.standard:r?"3.0"===i?t.COLORS.background.brandLight:t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
55
+ background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.COLORS.surface.standard:i?"3.0"===n?t.COLORS.background.brandLight:t.COLORS.background.positive.light:t.COLORS.surface.hovered}};
59
56
  }
60
- `,u=n.default.div`
57
+ `,l=r.default.div`
61
58
  display: flex;
62
59
  align-items: center;
63
60
  gap: 8px;
64
- `,x=n.default.div`
61
+ `,x=r.default.div`
65
62
  z-index: 1001;
66
63
  position: fixed;
67
64
  border-left: 4px solid transparent;
68
- `,c=n.default.div`
65
+ `,c=r.default.div`
69
66
  margin: 4px;
70
67
  background-color: ${t.COLORS.surface.standard};
71
68
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
72
69
  border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
73
- padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
70
+ padding-top: 4px;
74
71
  max-height: 480px;
75
- padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
72
+ padding-bottom: 4px;
76
73
  overflow-y: scroll;
77
74
 
78
75
  &::-webkit-scrollbar {
79
76
  display: none;
80
77
  }
81
- `,v=n.default.div`
78
+ `,f=r.default.div`
82
79
  width: 16px;
83
80
  height: 16px;
84
81
  display: flex;
85
82
  align-items: center;
86
83
  justify-content: center;
87
84
  margin-right: 4px;
88
- `,f=n.default.div`
85
+ `,g=r.default.div`
89
86
  width: 16px;
90
87
  height: 16px;
91
88
  display: flex;
92
89
  align-items: center;
93
90
  justify-content: center;
94
91
  margin-left: 4px;
95
- `,g=n.default.div`
92
+ `,b=r.default.div`
96
93
  width: ${e=>e.width};
97
- `,b=n.default(x)`
94
+ `,h=r.default(x)`
98
95
  width: ${e=>e.width};
99
96
  top: ${e=>e.top}px;
100
97
  left: ${e=>e.left}px;
101
- `;exports.ContentContainer=u,exports.DropdownContainer=i,exports.GroupedMenuListContainer=d,exports.LeadingIconContainer=v,exports.MenuItemContainer=l,exports.MenuItemWrapper=p,exports.NoResultsContainer=s,exports.OptionsContainer=o,exports.StyledMenuList=a,exports.StyledSubMenuWrapper=b,exports.SubMenuContainer=g,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=f;
98
+ `;exports.ContentContainer=l,exports.DropdownContainer=n,exports.GroupedMenuListContainer=a,exports.LeadingIconContainer=f,exports.MenuItemContainer=u,exports.MenuItemWrapper=s,exports.NoResultsContainer=d,exports.OptionsContainer=o,exports.StyledMenuList=p,exports.StyledSubMenuWrapper=h,exports.SubMenuContainer=b,exports.SubMenuListContainer=c,exports.SubMenuWrapper=x,exports.TrailingIconContainer=g;
@@ -13,8 +13,6 @@ interface WhatsNewProps {
13
13
  buttonTestId?: string;
14
14
  iconWidth?: number;
15
15
  iconHeight?: number;
16
- iconColor?: string;
17
- iconPadding?: number;
18
16
  customIcon?: React.ComponentType<{
19
17
  width?: number;
20
18
  height?: number;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=i=>{let{title:r="What's new",tooltip:a="What's new",searchPlaceholder:c="Search posts",emptyStateTitle:u="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:w,renderCustomContent:C,buttonTestId:p="whats-new-button",iconWidth:m=24,iconHeight:W=24,iconColor:x,iconPadding:g,customIcon:N}=i;const[j,P]=t.useState(!1),{whatsNewContent:S,isLoading:y,newContentCount:T}=s.useWhatsNewContext();return e.jsxs(e.Fragment,{children:[e.jsx(n.WhatsNewButton,{onClick:()=>P(!0),newContentCount:T,isOpen:j,isLoading:y,tooltip:a,testId:p,iconWidth:m,iconHeight:W,iconColor:x,iconPadding:g,customIcon:N}),e.jsx(o.WhatsNewPanel,{isOpen:j,onClose:()=>P(!1),content:S,isLoading:y,title:r,searchPlaceholder:c,emptyStateTitle:u,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:e=>{w&&w(e)},renderCustomContent:C})]})};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),n=require("./WhatsNewButton.js"),o=require("./WhatsNewPanel.js"),s=require("./WhatsNewProvider.js");exports.WhatsNew=r=>{let{title:i="What's new",tooltip:a="What's new",searchPlaceholder:u="Search posts",emptyStateTitle:c="Nothing new!",emptyStateDescription:h="There are no new updates or features at the moment. Check back soon!",noResultsText:l="Sorry, no results found.",width:d="480px",onContentClick:w,renderCustomContent:C,buttonTestId:p="whats-new-button",iconWidth:m=32,iconHeight:W=32,customIcon:x}=r;const[N,j]=t.useState(!1),{whatsNewContent:g,isLoading:S,newContentCount:y}=s.useWhatsNewContext();return e.jsxs(e.Fragment,{children:[e.jsx(n.WhatsNewButton,{onClick:()=>j(!0),newContentCount:y,isOpen:N,isLoading:S,tooltip:a,testId:p,iconWidth:m,iconHeight:W,customIcon:x}),e.jsx(o.WhatsNewPanel,{isOpen:N,onClose:()=>j(!1),content:g,isLoading:S,title:i,searchPlaceholder:u,emptyStateTitle:c,emptyStateDescription:h,noResultsText:l,width:d,onContentClick:e=>{w&&w(e)},renderCustomContent:C})]})};
@@ -35,8 +35,6 @@ export interface WhatsNewButtonProps {
35
35
  testId?: string;
36
36
  iconWidth?: number;
37
37
  iconHeight?: number;
38
- iconColor?: string;
39
- iconPadding?: number;
40
38
  customIcon?: React.ComponentType<{
41
39
  width?: number;
42
40
  height?: number;
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),n=require("../../constants/Theme.js"),s=require("../icon-button/IconButton.js"),i=require("../tooltips/Tooltip.js"),o=require("./WhatsNew.styles.js");exports.WhatsNewButton=r=>{let{onClick:a,newContentCount:c=0,isOpen:d=!1,isLoading:l=!1,tooltip:u="What's new",testId:h="whats-new-button",iconWidth:j=24,iconHeight:p=24,iconColor:x,iconPadding:b,customIcon:g}=r;return l?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsxs(o.WhatsNewIconContainer,Object.assign({count:c},{children:[t.jsx(i.Tooltip,Object.assign({body:u,placement:"bottom"},{children:t.jsx(s.IconButton,{Icon:null!=g?g:e.default,width:j,height:p,isSelected:d,iconColor:null!=x?x:d?n.COLORS.content.brand:n.COLORS.content.primary,onClick:a,"data-testid":h})})),c>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:c}))}))]}))};
1
+ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("../../assets/icons/whatsNew.svg.js"),s=require("../../constants/Theme.js"),n=require("../tooltips/Tooltip.js"),i=require("./WhatsNew.styles.js");exports.WhatsNewButton=o=>{let{onClick:r,newContentCount:a=0,isOpen:c=!1,isLoading:d=!1,tooltip:l="What's new",testId:h="whats-new-button",iconWidth:j=32,iconHeight:u=32,customIcon:x}=o;return d?t.jsxs("div",Object.assign({style:{margin:"0px 8px"}},{children:[t.jsx("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),t.jsx("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t.jsx(i.WhatsNewIconContainer,Object.assign({count:a},{children:t.jsxs("div",Object.assign({className:"main-icon-class "+(c?"icon-active":""),style:{color:c?s.COLORS.content.brand:s.COLORS.content.primary},onClick:r,"data-testid":h},{children:[t.jsx(n.Tooltip,Object.assign({body:l,placement:"bottom"},{children:t.jsx("div",{children:x?t.jsx(x,{width:j,height:u,color:c?s.COLORS.content.brand:s.COLORS.content.primary}):t.jsx(e.default,{width:j,height:u})})})),a>0&&t.jsx("div",Object.assign({className:"notification--count"},{children:t.jsx("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};
@@ -0,0 +1,31 @@
1
+ import { ComponentMeta, ComponentStory } from '@storybook/react';
2
+ declare const _default: ComponentMeta<({ color, size, }: {
3
+ color?: string | undefined;
4
+ size?: number | undefined;
5
+ }) => import("react/jsx-runtime").JSX.Element>;
6
+ export default _default;
7
+ export declare const AllIcons: ComponentStory<({ color, size, }: {
8
+ color?: string | undefined;
9
+ size?: number | undefined;
10
+ }) => import("react/jsx-runtime").JSX.Element>;
11
+ export declare const ActiveChecklist: ComponentStory<any>;
12
+ export declare const CheckIndicator: ComponentStory<any>;
13
+ export declare const CompletedChecklist: ComponentStory<any>;
14
+ export declare const InactiveChecklist: ComponentStory<any>;
15
+ export declare const ProgressBadge: ComponentStory<any>;
16
+ export declare const Redirect2: ComponentStory<any>;
17
+ export declare const SearchIconComponent: ComponentStory<any>;
18
+ export declare const SmallCheck: ComponentStory<any>;
19
+ export declare const Customise: ComponentStory<any>;
20
+ export declare const Enable: ComponentStory<any>;
21
+ export declare const GoLive: ComponentStory<any>;
22
+ export declare const Headset: ComponentStory<any>;
23
+ export declare const ListChecks: ComponentStory<any>;
24
+ export declare const Marketing: ComponentStory<any>;
25
+ export declare const Nudges: ComponentStory<any>;
26
+ export declare const OnboardingLogoStory: ComponentStory<any>;
27
+ export declare const OrderTracking: ComponentStory<any>;
28
+ export declare const PlusIconComponent: ComponentStory<any>;
29
+ export declare const Shopping: ComponentStory<any>;
30
+ export declare const Support: ComponentStory<any>;
31
+ export declare const Training: ComponentStory<any>;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as l,useRef as s,useMemo as r,useEffect as d,useCallback as c,Fragment as u}from"react";import a from"../../progress-bar/CircularProgressBar.js";import{COLORS as v}from"../../../constants/Theme.js";import{NavigationHyperlink as p}from"../../navigation-hyperlink/NavigationHyperlink.js";import{SidebarV2Popup as g}from"./SidebarV2Popup.js";import{SideBarV2Container as h,MainSideBarV2MenuWrapper as m,SibeBarV2MenuItem as y,SidebarMainMenu as k,SidebarMenuItemInner as M,SidebarNewTag as b,SidebarLockedChannel as L,SidebarMenuItemContainer as S,SidebarMenuItemText as w}from"./SidebarV2Styles.js";import{SimpleSidebarV2 as j}from"./SimpleSidebarV2.js";const f=t=>{const{logoSvg:v,allMenuList:b,activeMainMenu:L,activeSubMenu:S,router:w,onClickingMainMenu:f,onClickingSubMenu:C,onClickingAccessUpgradePanel:I,onClickingPopupMenuItem:N,popupMinHeight:O,isNewSidebar:P,menuStyle:A}=t,[B,E]=l(L),[F,_]=l(),[x,D]=l(S),[T,U]=l(!1),[R,V]=l(),[z,K]=l(),[W,q]=l(),G=s(null),J=r((()=>b.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[b]);d((()=>{E(L)}),[L]),d((()=>{D(S)}),[S]);const Q=c((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(V(void 0),_(void 0),U(!0),E(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?D(null==e?void 0:e.children[0]):D({}),_(void 0),setTimeout((()=>{U(!1)}),1e3))}),[f]),X=c((e=>{var i,n;if($(),_(void 0),V(void 0),"popup"==(null==e?void 0:e.layout)){const i=ie();i&&K(i),V(e)}else{const o=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(o){const i=Y(o,e);q(i)}_(e)}}),[]),Y=(e,i)=>{const n=e.getBoundingClientRect();let o=n.top;if(window.innerHeight<=768)return o;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;o=n.top+e-200}return o};d((()=>{const e=()=>{const e=ie();e&&K(e),Z()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Z=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},$=c((()=>{G.current&&(clearTimeout(G.current),G.current=null)}),[]),ee=c((()=>{$(),G.current=setTimeout((()=>{_(void 0),V(void 0)}),150)}),[$]),ie=()=>{var e,i;if(R){const n=(null===(i=null===(e=R.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||R.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=O?O:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(h,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:v||i(o,{})})),e(m,Object.assign({style:A},{children:[null==b?void 0:b.map(((o,t)=>{var l,s;return e(u,{children:[o.path?i(p,Object.assign({href:o.path,router:w},{children:i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee})})):i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee}),e(n,{children:["popup"===o.layout&&(null===(l=null==R?void 0:R.children)||void 0===l?void 0:l.length)&&i(g,{top:null!=z?z:void 0,menuList:null==R?void 0:R.children,onClickingPopupMenu:e=>{N&&N(e),V(void 0)},onMouseEnterOnMenu:$,onMouseLeaveOnMenu:ee}),(null===(s=null==F?void 0:F.children)||void 0===s?void 0:s.length)&&i(j,{menuList:null==F?void 0:F.children,width:200,activeMenu:x,onMouseEnterOnMenu:$,onMouseLeaveOnMenu:()=>_(void 0),left:78,postion:"fixed",header:F.displayName,theme:"brand",router:w,showAccessUpgradePanel:F.showAccessUpgradePanel,onMenuClick:(e,i)=>{D(e),E(F),_(void 0),V(void 0),i&&C(e)},onUpgrade:I,top:P&&W||0,isNewSidebar:P})]})]},t)})),"number"==typeof t.onboardingPercentage&&i(y,{children:i(k,{children:i(M,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===J?0:1===J?64:128},{children:i(a,{percentage:t.onboardingPercentage,width:48})}))})})]}))]})},C=e=>{const{icon:o,isActive:t,activeStateIcon:l}=e,s=o;return i(n,{children:t?i(l,{width:16,height:16,color:v.content.primaryInverse}):i(s,{width:16,height:16,color:v.content.secondaryInverse})})},H=n=>{let{option:o,index:l,onClickMainMenuLogic:s,setHandleHoverForFullLayout:r,isDisabled:d,mainActiveMenu:c,hoveredComp:u,popupMenu:a,onMouseLeaveMenuItem:v}=n;var p,g,h,m,j,f;return i(y,{children:e(k,Object.assign({id:(null===(g=null===(p=o.displayName)||void 0===p?void 0:p.split(" "))||void 0===g?void 0:g.join(""))||o.key.toString(),onClick:()=>!d&&s(o),onMouseEnter:()=>{r(o)},onMouseLeave:v,onFocus:()=>{},"aria-hidden":"true"},{children:[o.isNew&&i(b,Object.assign({isLastSticky:o.isLastSticky},{children:"NEW"})),o.isLocked&&i(L,Object.assign({isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky},{children:i(t,{height:16,width:16})})),e(M,Object.assign({id:(null===(m=null===(h=o.displayName)||void 0===h?void 0:h.split(" "))||void 0===m?void 0:m.join(""))+"_sub"||o.key.toString()+"_sub",isActive:(null==c?void 0:c.key)===o.key,isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky,isHovered:o.key===(null==u?void 0:u.key),isNew:o.isNew},{children:[i(C,{icon:o.icon,isActive:o.key==(null==c?void 0:c.key),activeStateIcon:null!==(j=o.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(f=o.hoverIcon)&&void 0!==f?f:{},isHovered:o.key==(null==u?void 0:u.key)||o.key==(null==a?void 0:a.key)}),i(S,{children:i(w,Object.assign({isActive:(null==o?void 0:o.key)===(null==c?void 0:c.key)},{children:o.displayName}))})]}),l)]}),l)})};export{f as BikSidebarV2};
1
+ import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o from"../../../assets/icons/Bik_logo.svg.js";import t from"../../../assets/icons/locked.svg.js";import{useState as s,useRef as l,useMemo as r,useEffect as d,useCallback as c,Fragment as u}from"react";import a from"../../progress-bar/CircularProgressBar.js";import{COLORS as v}from"../../../constants/Theme.js";import{NavigationHyperlink as p}from"../../navigation-hyperlink/NavigationHyperlink.js";import{SidebarV2Popup as h}from"./SidebarV2Popup.js";import{SideBarV2Container as g,MainSideBarV2MenuWrapper as m,SibeBarV2MenuItem as y,SidebarMainMenu as k,SidebarMenuItemInner as M,SidebarNewTag as b,SidebarLockedChannel as S,SidebarMenuItemContainer as L,SidebarMenuItemText as w}from"./SidebarV2Styles.js";import{SimpleSidebarV2 as j}from"./SimpleSidebarV2.js";const f=t=>{const{logoSvg:v,allMenuList:b,activeMainMenu:S,activeSubMenu:L,router:w,onClickingMainMenu:f,onClickingSubMenu:C,onClickingAccessUpgradePanel:I,onClickingPopupMenuItem:N,popupMinHeight:O,isNewSidebar:P,menuStyle:A}=t,[B,E]=s(S),[F,_]=s(),[x,D]=s(L),[T,U]=s(!1),[R,V]=s(),[z,K]=s(),[W,q]=s(),G=l(null),J=r((()=>b.filter((e=>e.is2ndLastSticky||e.isLastSticky)).length),[b]);d((()=>{E(S)}),[S]),d((()=>{D(L)}),[L]);const Q=c((e=>{var i;"popup"!==(null==e?void 0:e.layout)&&(V(void 0),_(void 0),U(!0),E(e),e.path||f(e),(null===(i=null==e?void 0:e.children)||void 0===i?void 0:i.length)?D(null==e?void 0:e.children[0]):D({}),_(void 0),setTimeout((()=>{U(!1)}),1e3))}),[f]),X=c((e=>{var i,n;if($(),_(void 0),V(void 0),"popup"==(null==e?void 0:e.layout)){const i=ie();i&&K(i),V(e)}else{const o=document.getElementById((null===(n=null===(i=e.displayName)||void 0===i?void 0:i.split(" "))||void 0===n?void 0:n.join(""))||e.key.toString());if(o){const i=Y(o,e);q(i)}_(e)}}),[]),Y=(e,i)=>{const n=e.getBoundingClientRect();let o=n.top;if(window.innerHeight<=768)return o;if(i.isLastSticky||i.is2ndLastSticky){const e=window.innerHeight-n.bottom;o=n.top+e-200}return o};d((()=>{const e=()=>{const e=ie();e&&K(e),Z()};return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]);const Z=()=>{const e=document.getElementById("_sub-menu"),i=null==e?void 0:e.getBoundingClientRect().height;i&&q(window.innerHeight-i)},$=c((()=>{G.current&&(clearTimeout(G.current),G.current=null)}),[]),ee=c((()=>{$(),G.current=setTimeout((()=>{_(void 0),V(void 0)}),150)}),[$]),ie=()=>{var e,i;if(R){const n=(null===(i=null===(e=R.displayName)||void 0===e?void 0:e.split(" "))||void 0===i?void 0:i.join(""))+"_sub"||R.key.toString()+"_sub",o=document.getElementById(n);if(o){const e=o.getBoundingClientRect();let i=e.top;const n=null!=O?O:320;return e.bottom+n>window.innerHeight&&(i-=e.bottom+n-window.innerHeight),i}return null}};return e(g,{children:[i("div",Object.assign({className:"bik-header-logo",onClick:()=>{},onKeyDown:()=>{},"aria-hidden":"true"},{children:v||i(o,{})})),e(m,Object.assign({style:A},{children:[null==b?void 0:b.map(((o,t)=>{var s,l;return e(u,{children:[o.path?i(p,Object.assign({href:o.path,router:w},{children:i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee})})):i(H,{option:o,index:t,onClickMainMenuLogic:Q,setHandleHoverForFullLayout:X,isDisabled:T,setHoveredComp:_,setPopupMenu:V,mainActiveMenu:B,hoveredComp:F,popupMenu:R,onMouseLeaveMenuItem:ee}),e(n,{children:["popup"===o.layout&&(null===(s=null==R?void 0:R.children)||void 0===s?void 0:s.length)&&i(h,{top:null!=z?z:void 0,menuList:null==R?void 0:R.children,onClickingPopupMenu:e=>{N&&N(e),V(void 0)},onMouseEnterOnMenu:$,onMouseLeaveOnMenu:ee}),(null===(l=null==F?void 0:F.children)||void 0===l?void 0:l.length)&&i(j,{menuList:null==F?void 0:F.children,width:200,activeMenu:x,onMouseEnterOnMenu:$,onMouseLeaveOnMenu:()=>_(void 0),left:78,postion:"fixed",header:F.displayName,theme:"brand",router:w,showAccessUpgradePanel:F.showAccessUpgradePanel,onMenuClick:(e,i)=>{D(e),E(F),_(void 0),V(void 0),i&&C(e)},onUpgrade:I,top:P&&W||0,isNewSidebar:P})]})]},t)})),"number"==typeof t.onboardingPercentage&&i(y,{children:i(k,{children:i(M,Object.assign({id:"bik-onboarding__checklist",stickyBottom:0===J?0:1===J?64:128},{children:i(a,{percentage:t.onboardingPercentage,width:48})}))})})]}))]})},C=e=>{const{icon:o,isActive:t,activeStateIcon:s,hoverStateIcon:l,isHovered:r}=e,d=o,c=s,u=l;return i(n,{children:t&&r||t?i(c,{width:16,height:16,color:v.content.primaryInverse}):r?i(u,{width:16,height:16,color:v.content.primaryInverse}):i(d,{width:16,height:16,color:v.content.secondaryInverse})})},H=n=>{let{option:o,index:s,onClickMainMenuLogic:l,setHandleHoverForFullLayout:r,isDisabled:d,mainActiveMenu:c,hoveredComp:u,popupMenu:a,onMouseLeaveMenuItem:v}=n;var p,h,g,m,j,f;return i(y,{children:e(k,Object.assign({id:(null===(h=null===(p=o.displayName)||void 0===p?void 0:p.split(" "))||void 0===h?void 0:h.join(""))||o.key.toString(),onClick:()=>!d&&l(o),onMouseEnter:()=>{r(o)},onMouseLeave:v,onFocus:()=>{},"aria-hidden":"true"},{children:[o.isNew&&i(b,Object.assign({isLastSticky:o.isLastSticky},{children:"NEW"})),o.isLocked&&i(S,Object.assign({isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky},{children:i(t,{height:16,width:16})})),e(M,Object.assign({id:(null===(m=null===(g=o.displayName)||void 0===g?void 0:g.split(" "))||void 0===m?void 0:m.join(""))+"_sub"||o.key.toString()+"_sub",isActive:(null==c?void 0:c.key)===o.key,isLastSticky:o.isLastSticky,is2ndLastSticky:o.is2ndLastSticky,isHovered:o.key===(null==u?void 0:u.key),isNew:o.isNew},{children:[i(C,{icon:o.icon,isActive:o.key==(null==c?void 0:c.key),activeStateIcon:null!==(j=o.activeIcon)&&void 0!==j?j:{},hoverStateIcon:null!==(f=o.hoverIcon)&&void 0!==f?f:{},isHovered:o.key==(null==u?void 0:u.key)||o.key==(null==a?void 0:a.key)}),i(L,{children:i(w,Object.assign({isActive:(null==o?void 0:o.key)===(null==c?void 0:c.key)},{children:o.displayName}))})]}),s)]}),s)})};export{f as BikSidebarV2};
@@ -1,4 +1,4 @@
1
- import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const d=e.div`
1
+ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../TypographyStyle.js";import{COLORS as o,BASE_COLORS as r,FONTS as n}from"../../../constants/Theme.js";const a=e.div`
2
2
  background-color: #28034e;
3
3
  width: 72px;
4
4
  justify-content: space-between;
@@ -23,11 +23,11 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
23
23
  object-fit: container;
24
24
  }
25
25
  }
26
- `,a=e.div`
26
+ `,d=e.div`
27
27
  margin: 0px 0px 16px;
28
- padding-bottom: 8px;
29
28
  `,p=e.div``,s=e.div`
30
- padding: 0px 6px;
29
+ overflow-y: auto;
30
+ padding: 0px 8px;
31
31
  margin-bottom: 6px;
32
32
  > * {
33
33
  gap: 4px;
@@ -48,7 +48,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
48
48
  z-index: 1;
49
49
  }
50
50
  `}}
51
- `,x=e.div`
51
+ `,c=e.div`
52
52
  position: absolute;
53
53
  right: 10px;
54
54
  margin-top: -5px;
@@ -64,7 +64,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
64
64
  z-index: 1;
65
65
  }
66
66
  `}}
67
- `,c=e.div`
67
+ `,x=e.div`
68
68
  display: flex;
69
69
  flex-direction: column;
70
70
  border-radius: 10px;
@@ -93,27 +93,23 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
93
93
  `}}
94
94
 
95
95
  ${e=>{let{isActive:i,isHovered:o}=e;return i&&o&&t`
96
- border-radius: 8px;
97
- border: 1px solid ${r.brand[700]};
98
- background-color: ${r.brand[800]};
96
+ background-color: ${r.brand[700]};
99
97
  `}}
100
98
 
101
99
 
102
100
  ${e=>{let{isLastSticky:i}=e;return i&&t`
103
101
  @media (min-height: 768px) {
104
102
  position: absolute;
105
- bottom: 72px;
106
- left: 6px;
107
- right: 6px;
103
+ bottom: 64px;
104
+ width: 85%;
108
105
  }
109
106
  `}}
110
107
 
111
108
  ${e=>{let{is2ndLastSticky:i}=e;return i&&t`
112
109
  @media (min-height: 768px) {
113
110
  position: absolute;
114
- bottom: 8px;
115
- left: 6px;
116
- right: 6px;
111
+ bottom: 0px;
112
+ width: 85%;
117
113
  }
118
114
  `}}
119
115
 
@@ -121,15 +117,14 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
121
117
  @media (min-height: 768px) {
122
118
  position: absolute;
123
119
  bottom: ${i}px;
124
- left: 6px;
125
- right: 6px;
120
+ width: 85%;
126
121
  }
127
122
  `}}
128
- `,l=e.div`
123
+ `,u=e.div`
129
124
  display: flex;
130
125
  flex-direction: row;
131
126
  cursor: pointer;
132
- `,u=e(i)`
127
+ `,l=e(i)`
133
128
  user-select: none;
134
129
  color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
135
130
  margin-bottom: 0px;
@@ -166,7 +161,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
166
161
  position: absolute;
167
162
  right: 100%;
168
163
  top: 0;
169
- width: 6px;
164
+ width: 24px;
170
165
  height: 100%;
171
166
  }
172
167
  }
@@ -284,4 +279,4 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
284
279
  border-radius: 8px;
285
280
  }
286
281
  }
287
- `;export{a as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,d as SideBarV2Container,x as SidebarLockedChannel,s as SidebarMainMenu,l as SidebarMenuItemContainer,c as SidebarMenuItemInner,u as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};
282
+ `;export{d as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,a as SideBarV2Container,c as SidebarLockedChannel,s as SidebarMainMenu,u as SidebarMenuItemContainer,x as SidebarMenuItemInner,l as SidebarMenuItemText,b as SidebarNewTag,m as SidebarV2PopupContainer,g as SimpleSidebarV2Container};
@@ -1 +1 @@
1
- import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as d}from"../tooltips/Tooltip.js";import{IconButton as l}from"./IconButton.styled.js";import{getIconColor as n}from"./theme.js";const s=i(((i,s)=>{var{id:r,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:g,svgStyle:u,iconColor:j,iconPadding:f,disabledTooltip:B}=i,T=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const I=n(c,y,h),S=e(l,Object.assign({id:r,ref:s,style:g,iconButtonType:c,bordered:m,disabled:y,isSelected:h,iconPadding:f},T,{children:o.createElement(a,{height:p,width:b,color:j||I,style:Object.assign({display:"block"},null!=u?u:{})})}));return y&&B?e(d,Object.assign({body:B},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:S}))})):S}));s.displayName="IconButton";export{s as IconButton};
1
+ import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import o,{forwardRef as i}from"react";import{Tooltip as l}from"../tooltips/Tooltip.js";import{IconButton as s}from"./IconButton.styled.js";import{getIconColor as r}from"./theme.js";const d=i(((i,d)=>{var{id:n,iconButtonType:c="default",Icon:a,height:p=20,width:b=20,bordered:m,disabled:y,isSelected:h,style:u,svgStyle:g,iconColor:j,disabledTooltip:f}=i,B=t(i,["id","iconButtonType","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","disabledTooltip"]);const T=r(c,y,h),I=e(s,Object.assign({id:n,ref:d,style:u,iconButtonType:c,bordered:m,disabled:y,isSelected:h},B,{children:o.createElement(a,{height:p,width:b,color:j||T,style:Object.assign({display:"block"},null!=g?g:{})})}));return y&&f?e(l,Object.assign({body:f},{children:e("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:I}))})):I}));d.displayName="IconButton";export{d as IconButton};
@@ -3,5 +3,4 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
3
3
  bordered?: boolean | undefined;
4
4
  iconButtonType: IconButtonType;
5
5
  isSelected?: boolean | undefined;
6
- iconPadding?: number | undefined;
7
6
  }, never>;
@@ -1,3 +1,3 @@
1
1
  import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
2
- ${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: ${void 0!==t.iconPadding?t.iconPadding:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
2
+ ${t=>`\n\tall: unset;\n\tcursor: pointer;\n\tpadding: 6px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${t.isSelected?`\n\t\t\tbackground: ${o(t.iconButtonType)};\n\t\t\t\t`:"\n\t\t\t\t:hover {\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t}\n\t\t\t"}\n\t${t.disabled&&"\n\t\t\tcursor: not-allowed !important;\n\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t"}\n\n\t`}
3
3
  `;export{r as IconButton};
@@ -40,10 +40,5 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
40
40
  */
41
41
  isSelected?: boolean;
42
42
  iconColor?: string;
43
- /**
44
- * Custom padding for the icon button container
45
- * @default 6
46
- */
47
- iconPadding?: number;
48
43
  disabledTooltip?: string;
49
44
  }
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as g}from"./Input-helper.js";import{Tooltip as v}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import f from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as x}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as O,IconHolder as T,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var S,D,E,M,P,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ne,rangeValidation:ie,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ge,hightlightInputColor:ve,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:fe,minCharsToTrigger:xe,isDisabled:ye=!1,allowUnsafeInput:je,leftIconStyle:Ce}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Oe=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[we,Ie]=r(!1),[ke,Be]=r(!1),[Le,He]=r(),Se="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(x),[Ee,Me]=r(""),Pe=a(null),ze=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(ze.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;ze.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,ze.current))}),[ze]),s((()=>{const e=ze.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ne,{passive:!1}),()=>{e.removeEventListener("wheel",Ne)}}),[]),s((()=>{ne&&Me("")}),[ne]),s((()=>{var e;Be(!!l.isActive),l.isActive&&(null===(e=ze.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{He(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;Ie(!1),("invalid"===l.state||Le||"disabled-invalid"===l.state)&&Ie(!0),"active"===l.state&&(null===(e=ze.current)||void 0===e||e.focus())}),[l.state,Le]),s((()=>{Ie(!!Le||"invalid"===l.state)}),[Le,l.state]);const Ae=function(e){if(h(e)){for(var t=arguments.length,n=new Array(t>1?t-1:0),i=1;i<t;i++)n[i-1]=arguments[i];e(...n)}},Fe=()=>"zip"===U?6:2e3,Ke=e=>{const t=0!==W?W:Fe(),n=xe,i=e.target.value;pe&&(!i.length||i.length>=n)&&pe(e),le||i.length&&!(i.length>=n)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&i.length>=t&&e.preventDefault()},Ne=e=>{e.preventDefault()},Re=e=>{let t=e.target.value;const n=0!==W?W+1:Fe(),i=xe;if(!je&&d(U)&&(t=u(t)),!oe&&n>0&&t.length>=n&&(t=t.substring(0,n-1)),l.textControl||Me(t||""),i&&t&&t.length<i)return;Z(t,e),se&&(ze.current.style.height=`${ze.current.scrollHeight}px`,t||(ze.current.style.height=ce||"48px"));const r=$||g;if(!r||!h(r))return;const[o,a]=r(t,U,ie);Ie(!o),He(l.errorMessage?l.errorMessage:a)},Ge=e=>{var t;l.skipFocus||Be(!0),Ae(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},We=e=>{var t;l.skipFocus||Be(!1),Ae(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},_e=()=>{var i;return e(n,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(i=null==De?void 0:De.input)&&void 0!==i?i:{},ref:ze,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Ge(e),onBlur:e=>We(e),placeholder:K||"Enter here",onChange:Re,onClick:e=>Ae(l.onClick),onKeyDown:e=>Ke(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:ze,onFocus:e=>Ge(e),onBlur:e=>We(e),onClick:e=>Ae(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Re,onKeyDown:e=>Ke(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(S=null==De?void 0:De.RootContainer)&&void 0!==S?S:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Le)&&e(j,Object.assign({invalid:!!Le},{children:[!!Le&&t(f,{width:16,height:16}),Le||q]})),W>0&&"BOTTOM"===ge&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(E=null===(D=(null!=ee?ee:"").toString())||void 0===D?void 0:D.length)&&void 0!==E?E:0,"/",W]}))]})),e(O,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||ke,isInvalid:we,style:null!==(P=null!==(M=null==De?void 0:De.InputWrapper)&&void 0!==M?M:fe)&&void 0!==P?P:{},version:re,height:l.height,hightlightInputColor:ve,hideBorder:be},{children:[!!Oe&&t(T,Object.assign({variant:J,iconSize:Se,onClick:()=>Ae(null==N?void 0:N.callback),isLeft:!0,style:Object.assign(Object.assign({},null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}),Ce)},{children:t(Oe,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:_e()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:_e()})),!!Te&&t(T,Object.assign({variant:J,iconSize:Se,onClick:()=>Ae(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>Ae(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:we},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(v,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(i,{style:{marginTop:-3},width:18,height:18,color:we?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ge&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
1
+ import{jsxs as e,jsx as t,Fragment as i}from"react/jsx-runtime";import n from"../../assets/icons/info.svg.js";import{forwardRef as l,useState as r,useContext as o,useRef as a,useEffect as s}from"react";import{Button as c}from"../button/Button.js";import{isFunction as h,shouldSanitizeForType as d,sanitizeUnsafeInput as u,validateInput as v}from"./Input-helper.js";import{Tooltip as g}from"../tooltips/Tooltip.js";import{TitleSmall as p,BodySecondary as m}from"../TypographyStyle.js";import{COLORS as b}from"../../constants/Theme.js";import x from"../../assets/icons/errorInfo.svg.js";import{InputStyleContext as f}from"./context/InputStyleProvider.js";import{RootContainer as y,InputFooter as j,MaxCharStyle as C,InputWrapper as T,IconHolder as O,PrefixHolder as w,InputContainer as I,InputContainerSmall as k,SuffixHolder as B,InputHeader as L}from"./Input.styled.js";const H=l(((l,H)=>{var D,E,M,P,S,z,A,F;const{placeholder:K,leftIcon:N,rightIcon:R,labelText:G,maxCharLimit:W,isRequired:_,hintText:q,type:U,state:V,validate:$,variant:J,button:Q,suffixText:X,prefixText:Y,onChangeText:Z,value:ee,noErrorHint:te,reset:ie,rangeValidation:ne,noKeyDownChange:le,version:re,noMaxCharCheck:oe,labelElement:ae,autoGrow:se,minHeight:ce,maxHeight:he,labelTextBold:de,truncateText:ue,maxCharLimitPosition:ve,hightlightInputColor:ge,onKeyDownEvent:pe,hideInputHeader:me,hideBorder:be,inputWrapperStyles:xe,minCharsToTrigger:fe,isDisabled:ye=!1,allowUnsafeInput:je}=Object.assign({maxCharLimit:0,type:"text",variant:"default",maxCharLimitPosition:"TOP",minCharsToTrigger:0},l),Ce=null==N?void 0:N.icon,Te=null==R?void 0:R.icon,[Oe,we]=r(!1),[Ie,ke]=r(!1),[Be,Le]=r(),He="x-small"===J?"12px":"small"===J?"18px":"22px",De=o(f),[Ee,Me]=r(""),Pe=a(null),Se=null!=H?H:Pe;s((()=>{Me(ee||""),!ee&&se&&(Se.current.style.height=ce||"48px")}),[ee]),s((()=>{var e;Se.current&&(null===(e=l.onReferenceInit)||void 0===e||e.call(l,Se.current))}),[Se]),s((()=>{const e=Se.current;if(e&&["phonenumber","zip","number"].includes(U))return e.addEventListener("wheel",Ke,{passive:!1}),()=>{e.removeEventListener("wheel",Ke)}}),[]),s((()=>{ie&&Me("")}),[ie]),s((()=>{var e;ke(!!l.isActive),l.isActive&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.isActive]),s((()=>{Le(l.errorMessage)}),[l.errorMessage]),s((()=>{var e;we(!1),("invalid"===l.state||Be||"disabled-invalid"===l.state)&&we(!0),"active"===l.state&&(null===(e=Se.current)||void 0===e||e.focus())}),[l.state,Be]),s((()=>{we(!!Be||"invalid"===l.state)}),[Be,l.state]);const ze=function(e){if(h(e)){for(var t=arguments.length,i=new Array(t>1?t-1:0),n=1;n<t;n++)i[n-1]=arguments[n];e(...i)}},Ae=()=>"zip"===U?6:2e3,Fe=e=>{const t=0!==W?W:Ae(),i=fe,n=e.target.value;pe&&(!n.length||n.length>=i)&&pe(e),le||n.length&&!(n.length>=i)||Z(ee||"",e),oe||![8].includes(e.which)&&t>0&&n.length>=t&&e.preventDefault()},Ke=e=>{e.preventDefault()},Ne=e=>{let t=e.target.value;const i=0!==W?W+1:Ae(),n=fe;if(!je&&d(U)&&(t=u(t)),!oe&&i>0&&t.length>=i&&(t=t.substring(0,i-1)),l.textControl||Me(t||""),n&&t&&t.length<n)return;Z(t,e),se&&(Se.current.style.height=`${Se.current.scrollHeight}px`,t||(Se.current.style.height=ce||"48px"));const r=$||v;if(!r||!h(r))return;const[o,a]=r(t,U,ne);we(!o),Le(l.errorMessage?l.errorMessage:a)},Re=e=>{var t;l.skipFocus||ke(!0),ze(null===(t=l.onFocus)||void 0===t?void 0:t.call(l,e))},Ge=e=>{var t;l.skipFocus||ke(!1),ze(null===(t=l.onBlur)||void 0===t?void 0:t.call(l,e))},We=()=>{var n;return e(i,{children:["multiline"!==U&&t("input",{className:ue?"truncate-class":"","data-test":l["data-test"],id:l.id,style:null!==(n=null==De?void 0:De.input)&&void 0!==n?n:{},ref:Se,disabled:ye,type:["phonenumber","zip","number"].includes(U)?"number":U,value:Ee,onFocus:e=>Re(e),onBlur:e=>Ge(e),placeholder:K||"Enter here",onChange:Ne,onClick:e=>ze(l.onClick),onKeyDown:e=>Fe(e)}),"multiline"===U&&t("textarea",{"data-test":l["data-test"],value:Ee,ref:Se,onFocus:e=>Re(e),onBlur:e=>Ge(e),onClick:e=>ze(l.onClick),disabled:ye,placeholder:K||"Enter here",onChange:Ne,onKeyDown:e=>Fe(e),maxLength:W>0?W:void 0})]})};return e(y,Object.assign({width:l.width,height:l.height,state:V,type:U,style:null!==(D=null==De?void 0:De.RootContainer)&&void 0!==D?D:{}},{children:[e("div",Object.assign({className:"flex-align-center"},{children:[!te&&(!!q||!!Be)&&e(j,Object.assign({invalid:!!Be},{children:[!!Be&&t(x,{width:16,height:16}),Be||q]})),W>0&&"BOTTOM"===ve&&e(C,Object.assign({position:"BOTTOM"},{children:[null!==(M=null===(E=(null!=ee?ee:"").toString())||void 0===E?void 0:E.length)&&void 0!==M?M:0,"/",W]}))]})),e(T,Object.assign({variant:J,state:V,width:l.width,isActive:"active"===V||Ie,isInvalid:Oe,style:null!==(S=null!==(P=null==De?void 0:De.InputWrapper)&&void 0!==P?P:xe)&&void 0!==S?S:{},version:re,height:l.height,hightlightInputColor:ge,hideBorder:be},{children:[!!Ce&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==N?void 0:N.callback),isLeft:!0,style:null!==(z=null==De?void 0:De.IconHolder)&&void 0!==z?z:{}},{children:t(Ce,{})})),!!Y&&t(w,Object.assign({variant:J},{children:Y})),"default"===J&&t(I,Object.assign({height:l.height,type:l.type,minHeight:ce,maxHeight:he,autoGrow:se},{children:We()})),["x-small","small"].includes(J)&&t(k,Object.assign({height:l.height,type:l.type},{children:We()})),!!Te&&t(O,Object.assign({variant:J,iconSize:He,onClick:()=>ze(null==R?void 0:R.callback),isLeft:!1},{children:t(Te,{})})),!!X&&t(B,Object.assign({variant:J},{children:X})),Q&&Q.text&&t(c,{buttonText:Q.text,onClick:()=>ze(null==Q?void 0:Q.onClick)}),Q&&Q.buttonProps&&t(c,Object.assign({},Q.buttonProps))]})),!me&&(!!G||!!W)&&e(L,Object.assign({invalid:Oe},{children:[ae&&ae,e("div",Object.assign({className:"label__container"},{children:[e(de?p:m,{children:[G,_?t("span",{children:"*"}):""]}),l.tooltipText&&t(g,Object.assign({body:l.tooltipText,placement:"top"},{children:t("span",{children:t(n,{style:{marginTop:-3},width:18,height:18,color:Oe?b.content.negative:b.content.primary})})}))]})),W>0&&"TOP"===ve&&e(C,{children:[null!==(F=null===(A=(null!=ee?ee:"").toString())||void 0===A?void 0:A.length)&&void 0!==F?F:0,"/",W]})]}))]}))}));H.displayName="Input";export{H as Input};
@@ -14,7 +14,6 @@ export interface InputProps {
14
14
  icon: React.FC;
15
15
  callback?: () => void;
16
16
  };
17
- leftIconStyle?: React.CSSProperties;
18
17
  rightIcon?: {
19
18
  icon: React.FC;
20
19
  callback?: () => void;
@@ -1 +1 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const i=i=>{let{width:s,onDropdownItemClick:p,option:a,parents:m,allowParentSelection:c,maxLevels:d,hideGroupLabel:u,currentLevel:h,renderNestedMenu:v,version:x}=i;return e(l,Object.assign({version:x},{children:[!u&&o(t,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:a.label})),a.options.map(((e,r)=>o(n,{width:s,onDropdownItemClick:p,option:e,parents:m,allowParentSelection:c,maxLevels:d,currentLevel:h,renderNestedMenu:v,version:x},r)))]}))};export{i as GroupedMenuList};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{COLORS as r}from"../../constants/Theme.js";import{BodyTiny as t}from"../TypographyStyle.js";import{MenuItem as n}from"./MenuItem.js";import{GroupedMenuListContainer as l}from"./MultiLevelDropdown.styled.js";const p=p=>{let{width:i,onDropdownItemClick:s,option:a,parents:m,allowParentSelection:d,maxLevels:c,hideGroupLabel:u,currentLevel:h,renderNestedMenu:x,version:v}=p;return e(l,{children:[!u&&o(t,Object.assign({style:{padding:"4px 8px 4px 12px",cursor:"default"},color:r.content.placeholder},{children:a.label})),a.options.map(((e,r)=>o(n,{width:i,onDropdownItemClick:s,option:e,parents:m,allowParentSelection:d,maxLevels:c,currentLevel:h,renderNestedMenu:x,version:v},r)))]})};export{p as GroupedMenuList};
@@ -1 +1 @@
1
- import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({version:C,onMouseEnter:e=>{F&&(R(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();q({top:t.top,left:t.right}),z.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{R(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=j.disabled)&&void 0!==e&&e||A&&!w||y(j,x)})()},id:"menuItemWrapper",style:{cursor:null!==(I=j.disabled)&&void 0!==I&&I?"not-allowed":"pointer",backgroundColor:null!==(T=j.disabled)&&void 0!==T&&T?l.surface.standard:"transparent"}},{children:[j.customComponent?j.customComponent:e(a,Object.assign({isSelected:j.selected,isSubMenuOpen:P,isHovered:B,isDisabled:null!==(L=j.disabled)&&void 0!==L&&L,version:C},{children:[e(p,{children:[j.leadingIcon&&t(u,{children:j.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(k=j.disabled)&&void 0!==k&&k?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary}},{children:j.label})),j.subText&&t(c,Object.assign({style:{color:null!==(D=j.disabled)&&void 0!==D&&D?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.secondary,marginTop:"2px"}},{children:j.subText}))]})]}),A?t(h,{children:t(i,{width:16,height:16,color:!F||null!==(E=j.disabled)&&void 0!==E&&E?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary})}):j.trailingIcon?t(h,{children:j.trailingIcon}):t(n,{})]})),!(null!==(N=j.disabled)&&void 0!==N&&N)&&j.children&&j.children.length>0&&F&&P&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(v,Object.assign({width:f,top:W.top,left:W.left},{children:t(g,Object.assign({version:C},{children:S(j.children,[...x,j],M+1)}))}))}))]}))};export{b as MenuItem};
1
+ import{jsxs as e,jsx as t,Fragment as n}from"react/jsx-runtime";import i from"../../assets/icons/chevronRight2.svg.js";import o,{useRef as r}from"react";import{COLORS as l}from"../../constants/Theme.js";import{BodyCaption as s,BodyTiny as c}from"../TypographyStyle.js";import{MenuItemWrapper as d,MenuItemContainer as a,ContentContainer as p,LeadingIconContainer as u,TrailingIconContainer as h,SubMenuContainer as m,StyledSubMenuWrapper as v,SubMenuListContainer as g}from"./MultiLevelDropdown.styled.js";const b=b=>{let{width:f,onDropdownItemClick:y,option:j,parents:x,allowParentSelection:w,maxLevels:O,currentLevel:M,renderNestedMenu:S,version:C}=b;var I,T,L,k,D,E,N;const[P,R]=o.useState(!1),[B,H]=o.useState(!1),[W,q]=o.useState({top:0,left:0}),z=r({top:0,left:0}),A=!!j.children&&j.children.length>0,F=A&&(void 0===O||M<O);return e(d,Object.assign({onMouseEnter:e=>{F&&(R(!0),(e=>{const t=e.currentTarget.getBoundingClientRect();q({top:t.top,left:t.right}),z.current={top:t.top,left:t.right}})(e))},onMouseLeave:()=>{R(!1)},onClick:e=>{e.stopPropagation(),(()=>{var e;!y||null!==(e=j.disabled)&&void 0!==e&&e||A&&!w||y(j,x)})()},id:"menuItemWrapper",style:{cursor:null!==(I=j.disabled)&&void 0!==I&&I?"not-allowed":"pointer",backgroundColor:null!==(T=j.disabled)&&void 0!==T&&T?l.surface.standard:"transparent"}},{children:[j.customComponent?j.customComponent:e(a,Object.assign({isSelected:j.selected,isSubMenuOpen:P,isHovered:B,isDisabled:null!==(L=j.disabled)&&void 0!==L&&L,version:C},{children:[e(p,{children:[j.leadingIcon&&t(u,{children:j.leadingIcon}),e("div",{children:[t(s,Object.assign({style:{color:null!==(k=j.disabled)&&void 0!==k&&k?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary}},{children:j.label})),j.subText&&t(c,Object.assign({style:{color:null!==(D=j.disabled)&&void 0!==D&&D?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.secondary,marginTop:"2px"}},{children:j.subText}))]})]}),A?t(h,{children:t(i,{width:16,height:16,color:!F||null!==(E=j.disabled)&&void 0!==E&&E?l.content.inactive:j.selected||B?"3.0"===C?l.text.primary:l.content.positive:l.content.primary})}):j.trailingIcon?t(h,{children:j.trailingIcon}):t(n,{})]})),!(null!==(N=j.disabled)&&void 0!==N&&N)&&j.children&&j.children.length>0&&F&&P&&t(m,Object.assign({width:f,className:"submenu",onMouseEnter:()=>H(!0),onMouseLeave:()=>H(!1)},{children:t(v,Object.assign({width:f,top:W.top,left:W.left},{children:t(g,Object.assign({version:C},{children:S(j.children,[...x,j],M+1)}))}))}))]}))};export{b as MenuItem};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:x,onDropdownOutsideClick:v,allowParentSelection:L,maxLevels:y,hideGroupLabel:S,version:C="1.0"}=h;const D=t.useRef(null),[k,E]=o(f),z=e=>{const n=Array.isArray(f)?[...f]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));E(o(f))},I=e=>{D.current&&!D.current.contains(e.target)?v&&v(!0):v&&v(!1)};return r((()=>{x&&z("")}),[x]),r((()=>(document.addEventListener("mousedown",I),()=>{document.removeEventListener("mousedown",I)})),[]),r((()=>{E(f)}),[f]),e(c,Object.assign({refElement:g,topOffset:j,leftOffset:O},{children:x&&e("div",Object.assign({ref:D,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"3.0"===C?"4px":"8px",whiteSpace:"normal"}},{children:n(d,Object.assign({width:m,version:C},{children:[w&&e("div",Object.assign({style:{padding:"3.0"===C?"0px":"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:z,version:"3.0"===C?"3.0":"2.0"})})),e(p,Object.assign({width:m,version:C},{children:(null!=k?k:[]).length>0&&e(a,{width:null!=m?m:"200px",onDropdownItemClick:b,options:k,parents:[],allowParentSelection:L,maxLevels:y,hideGroupLabel:S,currentLevel:1,version:C})})),0===(null!=k?k:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"},version:C},{children:"3.0"===C?e("span",Object.assign({style:{fontSize:"12px",color:i.content.placeholder,lineHeight:"16px"}},{children:"No results found!"})):e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{h as MultiLevelDropdown};
1
+ import{jsx as e,jsxs as n}from"react/jsx-runtime";import t,{useState as o,useEffect as r}from"react";import{ZeroState as s}from"../zeroState/ZeroState.js";import{COLORS as i}from"../../constants/Theme.js";import{SearchBox as l}from"../dropdown/OpenedDropdown/components/searchbox/SearchBox.js";import{Floater as c}from"../floater/floater.js";import{MenuList as a}from"./MenuList.js";import{DropdownContainer as d,OptionsContainer as p,NoResultsContainer as u}from"./MultiLevelDropdown.styled.js";const h=h=>{let{options:f,width:m,isSearchable:w,onDropdownItemClick:b,refElement:g,topOffset:j,leftOffset:O,isDropdownOpen:v,onDropdownOutsideClick:x,allowParentSelection:L,maxLevels:y,hideGroupLabel:S,version:C="1.0"}=h;const D=t.useRef(null),[k,E]=o(f),I=e=>{const n=Array.isArray(f)?[...f]:[],t=[];for(;n.length>0;){const o=n.shift();o&&o.label.toLowerCase().includes(e.toLowerCase())&&t.push(o),o&&"children"in o&&o.children?n.push(...o.children):o&&"options"in o&&o.options&&n.push(...o.options)}const o=e=>e.map((e=>{if(t.includes(e))return e;if("children"in e&&e.children){const n=o(e.children);if(n.length>0)return Object.assign(Object.assign({},e),{children:n})}if("options"in e&&e.options){const n=o(e.options);if(n.length>0)return Object.assign(Object.assign({},e),{options:n})}return null})).filter((e=>null!==e));E(o(f))},z=e=>{D.current&&!D.current.contains(e.target)?x&&x(!0):x&&x(!1)};return r((()=>{v&&I("")}),[v]),r((()=>(document.addEventListener("mousedown",z),()=>{document.removeEventListener("mousedown",z)})),[]),r((()=>{E(f)}),[f]),e(c,Object.assign({refElement:g,topOffset:j,leftOffset:O},{children:v&&e("div",Object.assign({ref:D,style:{backgroundColor:i.surface.standard,zIndex:99999,borderRadius:"3.0"===C?"4px":"8px",whiteSpace:"normal"}},{children:n(d,Object.assign({width:m,version:C},{children:[w&&e("div",Object.assign({style:{padding:"4px",width:null!=m?m:"200px"}},{children:e(l,{onSearch:I,version:"3.0"===C?"3.0":"2.0"})})),e(p,Object.assign({width:m},{children:(null!=k?k:[]).length>0&&e(a,{width:null!=m?m:"200px",onDropdownItemClick:b,options:k,parents:[],allowParentSelection:L,maxLevels:y,hideGroupLabel:S,currentLevel:1,version:C})})),0===(null!=k?k:[]).length&&e(u,Object.assign({style:{width:null!=m?m:"200px"}},{children:e(s,{title:"No results found!",subTitle:"Sorry, we are unable to find any results for your search."})}))]}))}))}))};export{h as MultiLevelDropdown};
@@ -4,19 +4,13 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
4
4
  }, never>;
5
5
  export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
6
6
  width?: string | undefined;
7
- version?: "1.0" | "2.0" | "3.0" | undefined;
8
7
  }, never>;
9
8
  export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
10
9
  width?: string | undefined;
11
- version?: "1.0" | "2.0" | "3.0" | undefined;
12
- }, never>;
13
- export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
14
- version?: "1.0" | "2.0" | "3.0" | undefined;
15
10
  }, never>;
11
+ export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
16
12
  export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
17
- export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
18
- version?: "1.0" | "2.0" | "3.0" | undefined;
19
- }, never>;
13
+ export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
20
14
  export interface MenuItemContainerProps {
21
15
  isSelected?: boolean;
22
16
  isHovered?: boolean;
@@ -1,78 +1,75 @@
1
- import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
1
+ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
2
2
  position: relative;
3
- border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
3
+ border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
4
4
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
5
- padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
5
+ padding-bottom: 4px;
6
6
  `,r=e.div`
7
- width: ${e=>{let{width:t}=e;return t||"200px"}};
7
+ width: ${e=>{let{width:i}=e;return i||"200px"}};
8
8
  max-width: 300px;
9
9
  max-height: 280px;
10
10
  overflow-y: scroll;
11
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
11
+ padding: 4px 0 0;
12
12
  &::-webkit-scrollbar {
13
13
  width: 0px;
14
14
  }
15
15
  `,n=e.div`
16
- margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
17
- height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
18
- width: ${e=>{let{width:t}=e;return t||"200px"}};
19
- display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
20
- align-items: center;
21
- justify-content: center;
16
+ margin-top: 64px;
17
+ height: 200px;
18
+ width: ${e=>{let{width:i}=e;return i||"200px"}};
22
19
  `,o=e.div`
23
20
  width: 100%;
24
21
  justify-content: center;
25
22
  cursor: pointer;
26
23
  align-items: center;
27
24
  justify-content: space-between;
28
- margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
25
+ margin: 4px 0;
29
26
  `,d=e.div`
30
27
  z-index: 1000;
31
28
  position: relative;
32
29
  margin: 0px;
33
30
  padding: 0px;
34
31
  width: 100%;
35
- `,s=e.div`
32
+ `,p=e.div`
36
33
  position: relative;
37
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
34
+ padding: 1px 4px;
38
35
  cursor: pointer;
39
36
  width: 100%;
40
37
  &:hover > .submenu,
41
38
  &:focus-within > .submenu {
42
39
  display: block;
43
40
  }
44
- `,p=e.div`
41
+ `,s=e.div`
45
42
  position: relative;
46
- padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
43
+ padding: 4px 8px 4px 8px;
47
44
  transition: background-color 0.2s;
48
45
  width: 100%;
49
- border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
46
+ border-radius: 8px;
50
47
  justify-content: center;
51
- background-color: ${e=>{let{isSelected:i,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?t.surface.standard:i||n?"3.0"===d?t.background.brandLight:t.background.positive.light:r?t.surface.hovered:t.surface.standard}};
52
- color: ${e=>{let{isSelected:i,isSubMenuOpen:r,version:n}=e;return i||r?"3.0"===n?t.text.primary:t.content.positive:t.content.primary}};
48
+ background-color: ${e=>{let{isSelected:t,isHovered:r,isSubMenuOpen:n,isDisabled:o,version:d}=e;return o?i.surface.standard:t||n?"3.0"===d?i.background.brandLight:i.background.positive.light:r?i.surface.hovered:i.surface.standard}};
49
+ color: ${e=>{let{isSelected:t,isSubMenuOpen:r,version:n}=e;return t||r?"3.0"===n?i.text.primary:i.content.positive:i.content.primary}};
53
50
  display: flex;
54
51
  align-items: center;
55
52
  justify-content: space-between;
56
53
 
57
54
  &:hover {
58
- background-color: ${e=>{let{isSelected:i,isDisabled:r,version:n}=e;return r?t.surface.standard:i?"3.0"===n?t.background.brandLight:t.background.positive.light:t.surface.hovered}};
55
+ background-color: ${e=>{let{isSelected:t,isDisabled:r,version:n}=e;return r?i.surface.standard:t?"3.0"===n?i.background.brandLight:i.background.positive.light:i.surface.hovered}};
59
56
  }
60
57
  `,a=e.div`
61
58
  display: flex;
62
59
  align-items: center;
63
60
  gap: 8px;
64
- `,l=e.div`
61
+ `,x=e.div`
65
62
  z-index: 1001;
66
63
  position: fixed;
67
64
  border-left: 4px solid transparent;
68
- `,x=e.div`
65
+ `,l=e.div`
69
66
  margin: 4px;
70
- background-color: ${t.surface.standard};
67
+ background-color: ${i.surface.standard};
71
68
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
72
- border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
73
- padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
69
+ border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
70
+ padding-top: 4px;
74
71
  max-height: 480px;
75
- padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
72
+ padding-bottom: 4px;
76
73
  overflow-y: scroll;
77
74
 
78
75
  &::-webkit-scrollbar {
@@ -92,10 +89,10 @@ import e from"styled-components";import{COLORS as t}from"../../constants/Theme.j
92
89
  align-items: center;
93
90
  justify-content: center;
94
91
  margin-left: 4px;
95
- `,v=e.div`
92
+ `,g=e.div`
96
93
  width: ${e=>e.width};
97
- `,g=e(l)`
94
+ `,h=e(x)`
98
95
  width: ${e=>e.width};
99
96
  top: ${e=>e.top}px;
100
97
  left: ${e=>e.left}px;
101
- `;export{a as ContentContainer,i as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,p as MenuItemContainer,s as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,g as StyledSubMenuWrapper,v as SubMenuContainer,x as SubMenuListContainer,l as SubMenuWrapper,u as TrailingIconContainer};
98
+ `;export{a as ContentContainer,t as DropdownContainer,o as GroupedMenuListContainer,c as LeadingIconContainer,s as MenuItemContainer,p as MenuItemWrapper,n as NoResultsContainer,r as OptionsContainer,d as StyledMenuList,h as StyledSubMenuWrapper,g as SubMenuContainer,l as SubMenuListContainer,x as SubMenuWrapper,u as TrailingIconContainer};
@@ -13,8 +13,6 @@ interface WhatsNewProps {
13
13
  buttonTestId?: string;
14
14
  iconWidth?: number;
15
15
  iconHeight?: number;
16
- iconColor?: string;
17
- iconPadding?: number;
18
16
  customIcon?: React.ComponentType<{
19
17
  width?: number;
20
18
  height?: number;
@@ -1 +1 @@
1
- import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const c=c=>{let{title:a="What's new",tooltip:h="What's new",searchPlaceholder:l="Search posts",emptyStateTitle:d="Nothing new!",emptyStateDescription:m="There are no new updates or features at the moment. Check back soon!",noResultsText:p="Sorry, no results found.",width:C="480px",onContentClick:u,renderCustomContent:w,buttonTestId:g="whats-new-button",iconWidth:f=24,iconHeight:W=24,iconColor:P,iconPadding:S,customIcon:T}=c;const[k,x]=n(!1),{whatsNewContent:y,isLoading:N,newContentCount:j}=r();return t(e,{children:[o(i,{onClick:()=>x(!0),newContentCount:j,isOpen:k,isLoading:N,tooltip:h,testId:g,iconWidth:f,iconHeight:W,iconColor:P,iconPadding:S,customIcon:T}),o(s,{isOpen:k,onClose:()=>x(!1),content:y,isLoading:N,title:a,searchPlaceholder:l,emptyStateTitle:d,emptyStateDescription:m,noResultsText:p,width:C,onContentClick:t=>{u&&u(t)},renderCustomContent:w})]})};export{c as WhatsNew};
1
+ import{jsxs as t,Fragment as e,jsx as o}from"react/jsx-runtime";import{useState as n}from"react";import{WhatsNewButton as i}from"./WhatsNewButton.js";import{WhatsNewPanel as s}from"./WhatsNewPanel.js";import{useWhatsNewContext as r}from"./WhatsNewProvider.js";const a=a=>{let{title:c="What's new",tooltip:h="What's new",searchPlaceholder:m="Search posts",emptyStateTitle:l="Nothing new!",emptyStateDescription:p="There are no new updates or features at the moment. Check back soon!",noResultsText:d="Sorry, no results found.",width:u="480px",onContentClick:C,renderCustomContent:w,buttonTestId:f="whats-new-button",iconWidth:W=32,iconHeight:g=32,customIcon:S}=a;const[T,k]=n(!1),{whatsNewContent:x,isLoading:y,newContentCount:N}=r();return t(e,{children:[o(i,{onClick:()=>k(!0),newContentCount:N,isOpen:T,isLoading:y,tooltip:h,testId:f,iconWidth:W,iconHeight:g,customIcon:S}),o(s,{isOpen:T,onClose:()=>k(!1),content:x,isLoading:y,title:c,searchPlaceholder:m,emptyStateTitle:l,emptyStateDescription:p,noResultsText:d,width:u,onContentClick:t=>{C&&C(t)},renderCustomContent:w})]})};export{a as WhatsNew};
@@ -35,8 +35,6 @@ export interface WhatsNewButtonProps {
35
35
  testId?: string;
36
36
  iconWidth?: number;
37
37
  iconHeight?: number;
38
- iconColor?: string;
39
- iconPadding?: number;
40
38
  customIcon?: React.ComponentType<{
41
39
  width?: number;
42
40
  height?: number;
@@ -1 +1 @@
1
- import{jsxs as t,jsx as n}from"react/jsx-runtime";import o from"../../assets/icons/whatsNew.svg.js";import{COLORS as i}from"../../constants/Theme.js";import{IconButton as e}from"../icon-button/IconButton.js";import{Tooltip as s}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as r}from"./WhatsNew.styles.js";const c=c=>{let{onClick:a,newContentCount:d=0,isOpen:l=!1,isLoading:m=!1,tooltip:p="What's new",testId:h="whats-new-button",iconWidth:f=24,iconHeight:g=24,iconColor:b,iconPadding:u,customIcon:j}=c;return m?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):t(r,Object.assign({count:d},{children:[n(s,Object.assign({body:p,placement:"bottom"},{children:n(e,{Icon:null!=j?j:o,width:f,height:g,isSelected:l,iconColor:null!=b?b:l?i.content.brand:i.content.primary,onClick:a,"data-testid":h})})),d>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:d}))}))]}))};export{c as WhatsNewButton};
1
+ import{jsxs as t,jsx as n}from"react/jsx-runtime";import i from"../../assets/icons/whatsNew.svg.js";import{COLORS as e}from"../../constants/Theme.js";import{Tooltip as o}from"../tooltips/Tooltip.js";import{WhatsNewIconContainer as s}from"./WhatsNew.styles.js";const r=r=>{let{onClick:c,newContentCount:a=0,isOpen:d=!1,isLoading:l=!1,tooltip:m="What's new",testId:h="whats-new-button",iconWidth:p=32,iconHeight:g=32,customIcon:b}=r;return l?t("div",Object.assign({style:{margin:"0px 8px"}},{children:[n("div",{style:{width:16,height:16,border:"2px solid #f3f3f3",borderTop:"2px solid #731DCF",borderRadius:"50%",animation:"spin 1s linear infinite"}}),n("style",{children:"\n\t\t\t\t\t\t@keyframes spin {\n\t\t\t\t\t\t\t0% { transform: rotate(0deg); }\n\t\t\t\t\t\t\t100% { transform: rotate(360deg); }\n\t\t\t\t\t\t}\n\t\t\t\t\t"})]})):n(s,Object.assign({count:a},{children:t("div",Object.assign({className:"main-icon-class "+(d?"icon-active":""),style:{color:d?e.content.brand:e.content.primary},onClick:c,"data-testid":h},{children:[n(o,Object.assign({body:m,placement:"bottom"},{children:n("div",{children:b?n(b,{width:p,height:g,color:d?e.content.brand:e.content.primary}):n(i,{width:p,height:g})})})),a>0&&n("div",Object.assign({className:"notification--count"},{children:n("div",Object.assign({className:"count--text"},{children:a}))}))]}))}))};export{r as WhatsNewButton};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikdotai/bik-component-library",
3
- "version": "0.0.786-beta.13",
3
+ "version": "0.0.786-beta.2",
4
4
  "description": "Bik Component Library",
5
5
  "repository": {
6
6
  "type": "git",