@bikdotai/bik-component-library 0.0.786-beta.1 → 0.0.786-beta.11

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

@@ -26,8 +26,7 @@
 `,a=o.default.div`
 	margin: 0px 0px 16px;
 `,d=o.default.div``,s=o.default.div`
-	overflow-y: auto;
-	padding: 0px 8px;
+	padding: 0px 6px;
 	margin-bottom: 6px;
 	> * {
 		gap: 4px;
@@ -64,7 +63,7 @@
 				z-index: 1;
 			}
 		`}}
-`,c=o.default.div`
+`,x=o.default.div`
 	display: flex;
 	flex-direction: column;
 	border-radius: 10px;
@@ -101,7 +100,8 @@
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: 64px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
 
@@ -109,7 +109,8 @@
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: 0px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
 
@@ -117,14 +118,15 @@
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: ${i}px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
-`,u=o.default.div`
+`,c=o.default.div`
 	display: flex;
 	flex-direction: row;
 	cursor: pointer;
-`,x=o.default(t.BodyTiny)`
+`,u=o.default(t.BodyTiny)`
 	user-select: none;
 	color: ${e=>{let{isActive:t}=e;return t?i.COLORS.content.primaryInverse:i.COLORS.content.secondaryInverse}};
 	margin-bottom: 0px;
@@ -161,7 +163,7 @@
 			position: absolute;
 			right: 100%;
 			top: 0;
-			width: 24px;
+			width: 6px;
 			height: 100%;
 		}
 	}
@@ -279,4 +281,4 @@
 			border-radius: 8px;
 		}
 	}
-`;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;
+`;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;

package/dist/cjs/components/bik-layout/MockMenus.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/cjs/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),l=require("../../tooltips/Tooltip.js"),i=require("../Common.styled.js"),s=require("../OpenedDropdown/components/OpennedDropdown.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const d=a(t).default.forwardRef(((a,d)=>{var{children:p,onDropdownVisbilityChange:c,version:u="1.0",tooltipContent:v,tooltipDirection:j,showTooltipArrow:w,isChildLoading:b,forceOpen:g}=a,h=e.__rest(a,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=d,[O,D]=t.useState(!1),[x,y]=t.useState(null),[S,C]=t.useState(null),m=t.useRef(null),{styles:q,attributes:E}=n.usePopper(x,S,{placement:h.placement,strategy:h.strategy}),R=e=>{var o,t;"2.0"===u&&h.isMultiSelect&&e&&(null===(o=h.onSelect)||void 0===o||o.call(h,[...e])),D(!1),null===(t=null==h?void 0:h.onClose)||void 0===t||t.call(h)};t.useImperativeHandle(f,(()=>({openDropdown:O})),[]),t.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=O)}),[O]),t.useEffect((()=>{null==c||c(O)}),[O]);const _=()=>{var e;return o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:{position:"relative"},ref:y},{children:[o.jsx(i.OverLapAbs,Object.assign({ref:m,allowEvents:h.allowEvents,disabled:h.disabled,onClick:e=>{var o;null===(o=h.onDropdownOpen)||void 0===o||o.call(h),O?(D(!1),e.preventDefault()):h.disabled||D(!0)},isChildLoading:b},{children:h.allowEvents?p:null})),h.allowEvents?null:p]})),(O||g)&&o.jsx(i.OpenDropdownContainer,Object.assign({ref:C,style:Object.assign(Object.assign({},q.popper),{zIndex:null!==(e=h.dropdownZIndex)&&void 0!==e?e:3})},E.popper,{"data-test":h["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===u?4:8}},{children:o.jsx(s.OpenedDropdown,Object.assign({},h,{onSelect:e=>{var o;"2.0"===u&&h.isMultiSelect||(null===(o=h.onSelect)||void 0===o||o.call(h,e),D(!1))},onClose:R,version:u,headerRef:m,zeroState:null==h?void 0:h.zeroState,isDraggable:h.isDraggable,onOptionsReorder:h.onOptionsReorder}))}))}))]})};return o.jsx(o.Fragment,{children:O||g||void 0===v?_():o.jsx(l.Tooltip,Object.assign({body:v,placement:j,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":h["data-test"]},{children:_()}))}))})}));d.displayName="DropdownPopover",exports.DropdownPopover=d;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../_virtual/_tslib.js"),o=require("react/jsx-runtime"),t=require("react"),n=require("react-popper"),r=require("../../dropShadow/DropShadow.js"),s=require("../../tooltips/Tooltip.js"),i=require("../../../constants/Theme.js"),l=require("../Common.styled.js"),a=require("../OpenedDropdown/components/OpennedDropdown.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p=d(t).default.forwardRef(((d,p)=>{var{children:c,onDropdownVisbilityChange:u,version:v="1.0",tooltipContent:j,tooltipDirection:b,showTooltipArrow:w,isChildLoading:g,forceOpen:O}=d,h=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=p,[D,S]=t.useState(!1),[C,x]=t.useState(!1),[y,m]=t.useState(null),[q,R]=t.useState(null),E=t.useRef(null),{styles:L,attributes:_}=n.usePopper(y,q,{placement:h.placement,strategy:h.strategy}),M=e=>{var o,t;"2.0"===v&&h.isMultiSelect&&e&&(null===(o=h.onSelect)||void 0===o||o.call(h,[...e])),S(!1),null===(t=null==h?void 0:h.onClose)||void 0===t||t.call(h)};t.useImperativeHandle(f,(()=>({openDropdown:D})),[]),t.useEffect((()=>{(null==f?void 0:f.current)&&(f.current.openDropdown=D)}),[D]),t.useEffect((()=>{null==u||u(D)}),[D]);const T=()=>{var e;return o.jsxs(o.Fragment,{children:[o.jsxs("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===v&&{backgroundColor:D||C?i.COLORS.surface.hovered:i.COLORS.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:m,onMouseEnter:"3.0"===v?()=>x(!0):void 0,onMouseLeave:"3.0"===v?()=>x(!1):void 0},{children:[o.jsx(l.OverLapAbs,Object.assign({ref:E,allowEvents:h.allowEvents,disabled:h.disabled,onClick:e=>{var o;null===(o=h.onDropdownOpen)||void 0===o||o.call(h),D?(S(!1),e.preventDefault()):h.disabled||S(!0)},isChildLoading:g},{children:h.allowEvents?c:null})),h.allowEvents?null:c]})),(D||O)&&o.jsx(l.OpenDropdownContainer,Object.assign({ref:R,style:Object.assign(Object.assign({},L.popper),{zIndex:null!==(e=h.dropdownZIndex)&&void 0!==e?e:3})},_.popper,{"data-test":h["data-test"]},{children:o.jsx(r.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===v?4:8}},{children:o.jsx(a.OpenedDropdown,Object.assign({},h,{onSelect:e=>{var o;"2.0"===v&&h.isMultiSelect||(null===(o=h.onSelect)||void 0===o||o.call(h,e),S(!1))},onClose:M,version:v,headerRef:E,zeroState:null==h?void 0:h.zeroState,isDraggable:h.isDraggable,onOptionsReorder:h.onOptionsReorder}))}))}))]})};return o.jsx(o.Fragment,{children:D||O||void 0===j?T():o.jsx(s.Tooltip,Object.assign({body:j,placement:b,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":h["data-test"]},{children:T()}))}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

package/dist/cjs/components/icon-button/IconButton.js

@@ -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"),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;
+"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;

package/dist/cjs/components/icon-button/IconButton.styled.d.ts

@@ -3,4 +3,5 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
+    iconPadding?: number | undefined;
 }, never>;

package/dist/cjs/components/icon-button/IconButton.styled.js

@@ -1,3 +1,3 @@
-"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`
-	${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`}
-`;exports.IconButton=o;
+"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`
+	${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`}
+`;exports.IconButton=r;

package/dist/cjs/components/icon-button/model.d.ts

@@ -40,5 +40,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isSelected?: boolean;
     iconColor?: string;
+    /**
+     * Custom padding for the icon button container
+     * @default 6
+     */
+    iconPadding?: number;
     disabledTooltip?: string;
 }

package/dist/cjs/components/input/Input.js

@@ -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,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;
+"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;

package/dist/cjs/components/input/Input.model.d.ts

@@ -14,6 +14,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    leftIconStyle?: React.CSSProperties;
     rightIcon?: {
         icon: React.FC;
         callback?: () => void;

package/dist/cjs/components/multi-level-dropdown/GroupedMenuList.js

@@ -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: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)))]})};
+"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)))]}))};

package/dist/cjs/components/multi-level-dropdown/MenuItem.js

@@ -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)}))}))}))]}))};
+"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)}))}))}))]}))};

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -1 +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."})}))]}))}))}))};
+"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."})}))]}))}))}))};

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -4,13 +4,19 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
 }, never>;
 export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
-export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
 export interface MenuItemContainerProps {
     isSelected?: boolean;
     isHovered?: boolean;

package/dist/cjs/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,98 +1,101 @@
-"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`
+"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`
 	position: relative;
 	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	padding-bottom: 4px;
-`,o=r.default.div`
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
+`,o=n.default.div`
 	width: ${e=>{let{width:t}=e;return t||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	padding: 4px 0 0;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
-`,d=r.default.div`
-	margin-top: 64px;
-	height: 200px;
+`,s=n.default.div`
+	margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
+	height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
 	width: ${e=>{let{width:t}=e;return t||"200px"}};
-`,a=r.default.div`
+	display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
+	align-items: center;
+	justify-content: center;
+`,d=n.default.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
-	margin: 4px 0;
-`,p=r.default.div`
+	margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
+`,a=n.default.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`,s=r.default.div`
+`,p=n.default.div`
 	position: relative;
-	padding: 1px 4px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
 	cursor: pointer;
 	width: 100%;
 	&:hover > .submenu,
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,u=r.default.div`
+`,l=n.default.div`
 	position: relative;
-	padding: 4px 8px 4px 8px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
 	transition: background-color 0.2s;
 	width: 100%;
-	border-radius: 8px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
 	justify-content: center;
-	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}};
-	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}};
+	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}};
+	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}};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		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}};
+		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}};
 	}
-`,l=r.default.div`
+`,u=n.default.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,x=r.default.div`
+`,x=n.default.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,c=r.default.div`
+`,c=n.default.div`
 	margin: 4px;
 	background-color: ${t.COLORS.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
-	padding-top: 4px;
+	padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	max-height: 480px;
-	padding-bottom: 4px;
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
 		display: none;
 	}
-`,f=r.default.div`
+`,v=n.default.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-right: 4px;
-`,g=r.default.div`
+`,f=n.default.div`
 	width: 16px;
 	height: 16px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`,b=r.default.div`
+`,g=n.default.div`
 	width: ${e=>e.width};
-`,h=r.default(x)`
+`,b=n.default(x)`
 	width: ${e=>e.width};
 	top: ${e=>e.top}px;
 	left: ${e=>e.left}px;
-`;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;
+`;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;

package/dist/cjs/components/whats-new/WhatsNew.d.ts

@@ -13,6 +13,8 @@ interface WhatsNewProps {
     buttonTestId?: string;
     iconWidth?: number;
     iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

package/dist/cjs/components/whats-new/WhatsNew.js

@@ -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=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})]})};
+"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})]})};

package/dist/cjs/components/whats-new/WhatsNew.types.d.ts

@@ -35,6 +35,8 @@ export interface WhatsNewButtonProps {
     testId?: string;
     iconWidth?: number;
     iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

package/dist/cjs/components/whats-new/WhatsNewButton.js

@@ -1 +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}))}))]}))}))};
+"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}))}))]}))};

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

@@ -26,8 +26,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 `,d=e.div`
 	margin: 0px 0px 16px;
 `,p=e.div``,s=e.div`
-	overflow-y: auto;
-	padding: 0px 8px;
+	padding: 0px 6px;
 	margin-bottom: 6px;
 	> * {
 		gap: 4px;
@@ -48,7 +47,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 				z-index: 1;
 			}
 		`}}
-`,c=e.div`
+`,x=e.div`
 	position: absolute;
 	right: 10px;
 	margin-top: -5px;
@@ -64,7 +63,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 				z-index: 1;
 			}
 		`}}
-`,x=e.div`
+`,c=e.div`
 	display: flex;
 	flex-direction: column;
 	border-radius: 10px;
@@ -101,7 +100,8 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: 64px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
 
@@ -109,7 +109,8 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: 0px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
 
@@ -117,14 +118,15 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 			@media (min-height: 768px) {
 				position: absolute;
 				bottom: ${i}px;
-				width: 85%;
+				left: 6px;
+				right: 6px;
 			}
 		`}}
-`,u=e.div`
+`,l=e.div`
 	display: flex;
 	flex-direction: row;
 	cursor: pointer;
-`,l=e(i)`
+`,u=e(i)`
 	user-select: none;
 	color: ${e=>{let{isActive:t}=e;return t?o.content.primaryInverse:o.content.secondaryInverse}};
 	margin-bottom: 0px;
@@ -161,7 +163,7 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 			position: absolute;
 			right: 100%;
 			top: 0;
-			width: 24px;
+			width: 6px;
 			height: 100%;
 		}
 	}
@@ -279,4 +281,4 @@ import e,{css as t}from"styled-components";import{BodyTiny as i}from"../../Typog
 			border-radius: 8px;
 		}
 	}
-`;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};
+`;export{d as MainSideBarV2MenuWrapper,p as SibeBarV2MenuItem,a 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};

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const Menus: ({
     displayName: string;
     key: number;

package/dist/esm/components/dropdown/DropdownPopover/index.js

@@ -1 +1 @@
-import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as t,jsxs as n}from"react/jsx-runtime";import l,{useState as r,useRef as i,useImperativeHandle as s,useEffect as d}from"react";import{usePopper as a}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{OverLapAbs as v,OpenDropdownContainer as u}from"../Common.styled.js";import{OpenedDropdown as m}from"../OpenedDropdown/components/OpennedDropdown.js";const w=l.forwardRef(((l,w)=>{var{children:h,onDropdownVisbilityChange:b,version:g="1.0",tooltipContent:f,tooltipDirection:O,showTooltipArrow:j,isChildLoading:D,forceOpen:y}=l,C=o(l,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const S=w,[R,x]=r(!1),[z,E]=r(null),[A,L]=r(null),T=i(null),{styles:I,attributes:M}=a(z,A,{placement:C.placement,strategy:C.strategy}),V=o=>{var e,t;"2.0"===g&&C.isMultiSelect&&o&&(null===(e=C.onSelect)||void 0===e||e.call(C,[...o])),x(!1),null===(t=null==C?void 0:C.onClose)||void 0===t||t.call(C)};s(S,(()=>({openDropdown:R})),[]),d((()=>{(null==S?void 0:S.current)&&(S.current.openDropdown=R)}),[R]),d((()=>{null==b||b(R)}),[R]);const _=()=>{var o;return n(t,{children:[n("div",Object.assign({style:{position:"relative"},ref:E},{children:[e(v,Object.assign({ref:T,allowEvents:C.allowEvents,disabled:C.disabled,onClick:o=>{var e;null===(e=C.onDropdownOpen)||void 0===e||e.call(C),R?(x(!1),o.preventDefault()):C.disabled||x(!0)},isChildLoading:D},{children:C.allowEvents?h:null})),C.allowEvents?null:h]})),(R||y)&&e(u,Object.assign({ref:L,style:Object.assign(Object.assign({},I.popper),{zIndex:null!==(o=C.dropdownZIndex)&&void 0!==o?o:3})},M.popper,{"data-test":C["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===g?4:8}},{children:e(m,Object.assign({},C,{onSelect:o=>{var e;"2.0"===g&&C.isMultiSelect||(null===(e=C.onSelect)||void 0===e||e.call(C,o),x(!1))},onClose:V,version:g,headerRef:T,zeroState:null==C?void 0:C.zeroState,isDraggable:C.isDraggable,onOptionsReorder:C.onOptionsReorder}))}))}))]})};return e(t,{children:R||y||void 0===f?_():e(c,Object.assign({body:f,placement:O,hideArrow:!j},{children:e("div",Object.assign({"data-test":C["data-test"]},{children:_()}))}))})}));w.displayName="DropdownPopover";export{w as DropdownPopover};
+import{__rest as o}from"../../../_virtual/_tslib.js";import{jsx as e,Fragment as n,jsxs as t}from"react/jsx-runtime";import r,{useState as i,useRef as l,useImperativeHandle as s,useEffect as a}from"react";import{usePopper as d}from"react-popper";import{DropShadow as p}from"../../dropShadow/DropShadow.js";import{Tooltip as c}from"../../tooltips/Tooltip.js";import{COLORS as u}from"../../../constants/Theme.js";import{OverLapAbs as v,OpenDropdownContainer as m}from"../Common.styled.js";import{OpenedDropdown as b}from"../OpenedDropdown/components/OpennedDropdown.js";const g=r.forwardRef(((r,g)=>{var{children:h,onDropdownVisbilityChange:w,version:f="1.0",tooltipContent:j,tooltipDirection:O,showTooltipArrow:D,isChildLoading:C,forceOpen:y}=r,S=o(r,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const R=g,[E,x]=i(!1),[z,L]=i(!1),[M,T]=i(null),[k,A]=i(null),I=l(null),{styles:V,attributes:_}=d(M,k,{placement:S.placement,strategy:S.strategy}),N=o=>{var e,n;"2.0"===f&&S.isMultiSelect&&o&&(null===(e=S.onSelect)||void 0===e||e.call(S,[...o])),x(!1),null===(n=null==S?void 0:S.onClose)||void 0===n||n.call(S)};s(R,(()=>({openDropdown:E})),[]),a((()=>{(null==R?void 0:R.current)&&(R.current.openDropdown=E)}),[E]),a((()=>{null==w||w(E)}),[E]);const P=()=>{var o;return t(n,{children:[t("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===f&&{backgroundColor:E||z?u.surface.hovered:u.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:T,onMouseEnter:"3.0"===f?()=>L(!0):void 0,onMouseLeave:"3.0"===f?()=>L(!1):void 0},{children:[e(v,Object.assign({ref:I,allowEvents:S.allowEvents,disabled:S.disabled,onClick:o=>{var e;null===(e=S.onDropdownOpen)||void 0===e||e.call(S),E?(x(!1),o.preventDefault()):S.disabled||x(!0)},isChildLoading:C},{children:S.allowEvents?h:null})),S.allowEvents?null:h]})),(E||y)&&e(m,Object.assign({ref:A,style:Object.assign(Object.assign({},V.popper),{zIndex:null!==(o=S.dropdownZIndex)&&void 0!==o?o:3})},_.popper,{"data-test":S["data-test"]},{children:e(p,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===f?4:8}},{children:e(b,Object.assign({},S,{onSelect:o=>{var e;"2.0"===f&&S.isMultiSelect||(null===(e=S.onSelect)||void 0===e||e.call(S,o),x(!1))},onClose:N,version:f,headerRef:I,zeroState:null==S?void 0:S.zeroState,isDraggable:S.isDraggable,onOptionsReorder:S.onOptionsReorder}))}))}))]})};return e(n,{children:E||y||void 0===j?P():e(c,Object.assign({body:j,placement:O,hideArrow:!D},{children:e("div",Object.assign({"data-test":S["data-test"]},{children:P()}))}))})}));g.displayName="DropdownPopover";export{g as DropdownPopover};

package/dist/esm/components/icon-button/IconButton.js

@@ -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 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};
+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};

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

@@ -3,4 +3,5 @@ export declare const IconButton: import("styled-components").StyledComponent<"bu
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
+    iconPadding?: number | undefined;
 }, never>;

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

@@ -1,3 +1,3 @@
 import t from"styled-components";import{COLORS as n}from"../../constants/Theme.js";import{generateBackgroundColor as o}from"./theme.js";const r=t.button`
-	${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`}
+	${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`}
 `;export{r as IconButton};

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

@@ -40,5 +40,10 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      */
     isSelected?: boolean;
     iconColor?: string;
+    /**
+     * Custom padding for the icon button container
+     * @default 6
+     */
+    iconPadding?: number;
     disabledTooltip?: string;
 }

package/dist/esm/components/input/Input.js

@@ -1 +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};
+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};

package/dist/esm/components/input/Input.model.d.ts

@@ -14,6 +14,7 @@ export interface InputProps {
         icon: React.FC;
         callback?: () => void;
     };
+    leftIconStyle?: React.CSSProperties;
     rightIcon?: {
         icon: React.FC;
         callback?: () => void;

package/dist/esm/components/multi-level-dropdown/GroupedMenuList.js

@@ -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 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};
+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};

package/dist/esm/components/multi-level-dropdown/MenuItem.js

@@ -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({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};
+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};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.js

@@ -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: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};
+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};

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.d.ts

@@ -4,13 +4,19 @@ export declare const DropdownContainer: import("styled-components").StyledCompon
 }, never>;
 export declare const OptionsContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const NoResultsContainer: import("styled-components").StyledComponent<"div", any, {
     width?: string | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
+export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
-export declare const GroupedMenuListContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledMenuList: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    version?: "1.0" | "2.0" | "3.0" | undefined;
+}, never>;
 export interface MenuItemContainerProps {
     isSelected?: boolean;
     isHovered?: boolean;

package/dist/esm/components/multi-level-dropdown/MultiLevelDropdown.styled.js

@@ -1,75 +1,78 @@
-import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
+import e from"styled-components";import{COLORS as t}from"../../constants/Theme.js";const i=e.div`
 	position: relative;
-	border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	padding-bottom: 4px;
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 `,r=e.div`
-	width: ${e=>{let{width:i}=e;return i||"200px"}};
+	width: ${e=>{let{width:t}=e;return t||"200px"}};
 	max-width: 300px;
 	max-height: 280px;
 	overflow-y: scroll;
-	padding: 4px 0 0;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0 0"}};
 	&::-webkit-scrollbar {
 		width: 0px;
 	}
 `,n=e.div`
-	margin-top: 64px;
-	height: 200px;
-	width: ${e=>{let{width:i}=e;return i||"200px"}};
+	margin-top: ${e=>{let{version:t}=e;return"3.0"===t?0:64}}px;
+	height: ${e=>{let{version:t}=e;return"3.0"===t?236:200}}px;
+	width: ${e=>{let{width:t}=e;return t||"200px"}};
+	display: ${e=>{let{version:t}=e;return"3.0"===t?"flex":"block"}};
+	align-items: center;
+	justify-content: center;
 `,o=e.div`
 	width: 100%;
 	justify-content: center;
 	cursor: pointer;
 	align-items: center;
 	justify-content: space-between;
-	margin: 4px 0;
+	margin: ${e=>{let{version:t}=e;return"3.0"===t?"0":"4px 0"}};
 `,d=e.div`
 	z-index: 1000;
 	position: relative;
 	margin: 0px;
 	padding: 0px;
 	width: 100%;
-`,p=e.div`
+`,s=e.div`
 	position: relative;
-	padding: 1px 4px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"0px":"1px 4px"}};
 	cursor: pointer;
 	width: 100%;
 	&:hover > .submenu,
 	&:focus-within > .submenu {
 		display: block;
 	}
-`,s=e.div`
+`,p=e.div`
 	position: relative;
-	padding: 4px 8px 4px 8px;
+	padding: ${e=>{let{version:t}=e;return"3.0"===t?"8px":"4px 8px"}};
 	transition: background-color 0.2s;
 	width: 100%;
-	border-radius: 8px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?0:8}}px;
 	justify-content: center;
-	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}};
-	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}};
+	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}};
+	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}};
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 
 	&:hover {
-		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}};
+		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}};
 	}
 `,a=e.div`
 	display: flex;
 	align-items: center;
 	gap: 8px;
-`,x=e.div`
+`,l=e.div`
 	z-index: 1001;
 	position: fixed;
 	border-left: 4px solid transparent;
-`,l=e.div`
+`,x=e.div`
 	margin: 4px;
-	background-color: ${i.surface.standard};
+	background-color: ${t.surface.standard};
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
-	border-radius: ${e=>{let{version:i}=e;return"3.0"===i?4:8}}px;
-	padding-top: 4px;
+	border-radius: ${e=>{let{version:t}=e;return"3.0"===t?4:8}}px;
+	padding-top: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	max-height: 480px;
-	padding-bottom: 4px;
+	padding-bottom: ${e=>{let{version:t}=e;return"3.0"===t?0:4}}px;
 	overflow-y: scroll;
 
 	&::-webkit-scrollbar {
@@ -89,10 +92,10 @@ import e from"styled-components";import{COLORS as i}from"../../constants/Theme.j
 	align-items: center;
 	justify-content: center;
 	margin-left: 4px;
-`,g=e.div`
+`,v=e.div`
 	width: ${e=>e.width};
-`,h=e(x)`
+`,g=e(l)`
 	width: ${e=>e.width};
 	top: ${e=>e.top}px;
 	left: ${e=>e.left}px;
-`;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};
+`;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};

package/dist/esm/components/whats-new/WhatsNew.d.ts

@@ -13,6 +13,8 @@ interface WhatsNewProps {
     buttonTestId?: string;
     iconWidth?: number;
     iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

package/dist/esm/components/whats-new/WhatsNew.js

@@ -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 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};
+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};

package/dist/esm/components/whats-new/WhatsNew.types.d.ts

@@ -35,6 +35,8 @@ export interface WhatsNewButtonProps {
     testId?: string;
     iconWidth?: number;
     iconHeight?: number;
+    iconColor?: string;
+    iconPadding?: number;
     customIcon?: React.ComponentType<{
         width?: number;
         height?: number;

package/dist/esm/components/whats-new/WhatsNewButton.js

@@ -1 +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};
+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};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.786-beta.1",
+	"version": "0.0.786-beta.11",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",

package/dist/cjs/assets/icons/Icons.stories.d.ts

@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<({ color, size, }: {
-    color?: string | undefined;
-    size?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
-export declare const AllIcons: ComponentStory<({ color, size, }: {
-    color?: string | undefined;
-    size?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
-export declare const ActiveChecklist: ComponentStory<any>;
-export declare const CheckIndicator: ComponentStory<any>;
-export declare const CompletedChecklist: ComponentStory<any>;
-export declare const InactiveChecklist: ComponentStory<any>;
-export declare const ProgressBadge: ComponentStory<any>;
-export declare const Redirect2: ComponentStory<any>;
-export declare const SearchIconComponent: ComponentStory<any>;
-export declare const SmallCheck: ComponentStory<any>;
-export declare const Customise: ComponentStory<any>;
-export declare const Enable: ComponentStory<any>;
-export declare const GoLive: ComponentStory<any>;
-export declare const Headset: ComponentStory<any>;
-export declare const ListChecks: ComponentStory<any>;
-export declare const Marketing: ComponentStory<any>;
-export declare const Nudges: ComponentStory<any>;
-export declare const OnboardingLogoStory: ComponentStory<any>;
-export declare const OrderTracking: ComponentStory<any>;
-export declare const PlusIconComponent: ComponentStory<any>;
-export declare const Shopping: ComponentStory<any>;
-export declare const Support: ComponentStory<any>;
-export declare const Training: ComponentStory<any>;

package/dist/esm/assets/icons/Icons.stories.d.ts

@@ -1,31 +0,0 @@
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-declare const _default: ComponentMeta<({ color, size, }: {
-    color?: string | undefined;
-    size?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
-export default _default;
-export declare const AllIcons: ComponentStory<({ color, size, }: {
-    color?: string | undefined;
-    size?: number | undefined;
-}) => import("react/jsx-runtime").JSX.Element>;
-export declare const ActiveChecklist: ComponentStory<any>;
-export declare const CheckIndicator: ComponentStory<any>;
-export declare const CompletedChecklist: ComponentStory<any>;
-export declare const InactiveChecklist: ComponentStory<any>;
-export declare const ProgressBadge: ComponentStory<any>;
-export declare const Redirect2: ComponentStory<any>;
-export declare const SearchIconComponent: ComponentStory<any>;
-export declare const SmallCheck: ComponentStory<any>;
-export declare const Customise: ComponentStory<any>;
-export declare const Enable: ComponentStory<any>;
-export declare const GoLive: ComponentStory<any>;
-export declare const Headset: ComponentStory<any>;
-export declare const ListChecks: ComponentStory<any>;
-export declare const Marketing: ComponentStory<any>;
-export declare const Nudges: ComponentStory<any>;
-export declare const OnboardingLogoStory: ComponentStory<any>;
-export declare const OrderTracking: ComponentStory<any>;
-export declare const PlusIconComponent: ComponentStory<any>;
-export declare const Shopping: ComponentStory<any>;
-export declare const Support: ComponentStory<any>;
-export declare const Training: ComponentStory<any>;