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

package/dist/esm/components/button/themes.d.ts

@@ -2,13 +2,13 @@ import { Size, Type } from './model';
 export declare const getBackgroundColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean, buttonColor?: string) => string;
 export declare const getColor: (type: Type, size: Size, inverse?: boolean, darkMode?: boolean) => string;
 export declare const getDisabledTextColor: (inverse?: boolean) => string;
-export declare const getPadding: (type: Type, size: Size) => "0px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
+export declare const getPadding: (type: Type, size: Size) => "0px" | "3px 6px" | "4px 6px" | "4px 8px" | "6px 4px" | "6px 12px" | "10px 4px" | "10px 12px" | "14px 4px" | "14px 12px" | undefined;
 export declare const GetButtonTextComponent: (size: Size, type: Type, disabled?: boolean) => import("styled-components").StyledComponent<"div", any, {
     numberOfLines?: number | undefined;
     color?: string | undefined;
 }, never>;
 export declare const getBorderColor: (type: Type, inverse?: boolean, error?: boolean) => string;
-export declare const getBorder: (version: '1.0' | '2.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
+export declare const getBorder: (version: '1.0' | '2.0' | '3.0', type: Type, size: Size, inverse?: boolean, error?: boolean) => string;
 export declare const getLinearGradientValue: (size: Size) => string;
 /**
  * Adjusts the brightness of a given hex color by a specified percentage.

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

@@ -1 +1 @@
-import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},u=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t?a:"small"===t?o:i:"small"===t?r:n,b=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${b(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},x=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},y=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",m=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,k=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:b(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,w=(r,n,e,a)=>"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${x(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",I=(r,n)=>n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,M=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{u as GetButtonTextComponent,I as SpinnerColorMap,$ as generateDisabledStyling,k as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,b as getBorderColor,M as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,y as getHoverButtonBackground,h as getHoverButtonBackgroundCustom,m as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,w as getLoadingBackground,L as getLoadingBorder,x as getLoadingButtonBackgroundCustom,p as getPadding};
+import{COLORS as t}from"../../constants/Theme.js";import{ButtonRegularAI as r,ButtonLargeAI as n,BodySecondary as e,BodyCaption as a,ButtonRegular as o,ButtonLarge as i}from"../TypographyStyle.js";const c=(r,n,e,a,o)=>{if("special"===r)return t.background.brandVeryLight;if("secondaryGray"===r)return"transparent";if("chip"===n)return"text"===r?"transparent":a?t.surface.hovered:t.surface.subdued;switch(r){case"primary":return o||(e?t.background.warning.vibrant:t.background.inverseLight);case"destructive":return t.background.negative.vibrant;default:return"transparent"}},d=(r,n,e,a)=>{if("special"===r)return t.background.inverseLight;if("secondaryGray"===r)return t.content.secondary;if("chip"===n)return"text"===r?e?t.content.inactive:t.content.brand:a?t.content.primary:t.content.secondary;switch(r){case"primary":return e?t.content.primary:t.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.content.secondary;case"destructive":return t.content.primaryInverse;case"ai":return t.content.ai;default:return e?t.content.primaryInverse:t.stroke.brand}},s=r=>r?"rgba(255, 255, 255, 0.5)":t.content.inactive,p=(t,r)=>{if("text"===t)return"0px";if("xs"===r){return"secondary"===t||"special"===t||"secondaryGray"===t?"3px 6px":"4px 6px"}if("chip"===r)return"4px 8px";if("small"===r)switch(t){case"tertiary":case"tertiaryGray":return"6px 4px";default:return"6px 12px"}else if("medium"===r)switch(t){case"tertiary":case"tertiaryGray":return"10px 4px";default:return"10px 12px"}else if("large"===r)switch(t){case"tertiary":case"tertiaryGray":return"14px 4px";default:return"14px 12px"}},b=(t,c,d)=>d||"ai"!==c?"dashRegular"===c?e:"chip"===t||"xs"===t?a:"small"===t?o:i:"small"===t?r:n,u=(r,n,e)=>e?t.stroke.negative.vibrant:n?t.surface.standard:"secondary"==r?t.stroke.brand:t.content.placeholder,g=(r,n,e,a,o)=>"text"==n?"border: none;":"special"===n?`border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===n?`border: 1px solid ${t.stroke.primary};`:"chip"===e?`border: ${"2.0"===r?.5:1}px solid ${t.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${u(n,a,o)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${u(n,!1,o)};`:"border: none;",l=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",y=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)-e,o=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(a,0)<<16)+(Math.max(o,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},h=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),a=(n>>16)+e,o=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(a,255)<<16)+(Math.min(o,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`},x=(r,n)=>"ai"===r?`background: ${t.surface.aiLight};`:"text"===r?"background-color:transparent;":"special"===r||"secondaryGray"===r||n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",k=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`,m=(r,n)=>n?"":"primary"===r?`background-color: ${t.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",$=(r,n,e)=>"special"===r?`background-color: ${t.background.base}; border: 1px solid ${t.stroke.primary};`:"secondaryGray"===r?`border: 1px solid ${t.stroke.primary};`:"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.stroke.primary};`:"",v=function(t,r){let n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:u(t,!1);return`\n\t.line-top {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-right {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-bottom {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: 1px;\n\t\twidth: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto right,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t.line-left {\n\t\tposition: absolute;\n\t\tleft: 0;\n\t\ttop: 0;\n\t\twidth: 1px;\n\t\theight: 100%;\n\t\tbackground: repeating-linear-gradient(\n\t\t\tto bottom,\n\t\t\t${n},\n\t\t\t${n}\n\t\t\t\t${l(r)}\n\t\t);\n\t}\n\t`},f=(r,n,e)=>"text"===r?`background-color: ${t.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.content.brand};`:"special"===r?`background-color: ${t.background.brandLight}; border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===r?`background-color: ${t.surface.hovered}; border: 1px solid ${t.stroke.primary};`:"chip"===n?`border: 1px solid ${t.stroke.brandLightAlt};\n\t\tbackground-color: ${t.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.background.warning.vibrant} !important;\n\t\t\tbox-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);\n\t\t\t`:"box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35);":"secondary"===r||"tertiary"===r||"tertiaryGray"===r||r.startsWith("dash")?e?`background-color: ${t.background.inverseLight}  !important;`:`background-color: ${t.background.brandLight};`:void 0,G=(r,n,e,a)=>"special"===r?`background-color: ${t.background.brandVeryLight};`:"secondaryGray"===r?`background-color: ${t.surface.subdued};`:"chip"===n?`background-color: ${t.background.base};`:"primary"===r?a?`background-color: ${h(a,50)};`:`background-color: ${e?t.background.warning.vibrant:t.background.brandLight};`:"destructive"===r?`background-color: ${t.background.negative.light};`:"background-color: transparent;",L=(r,n,e)=>"special"===r?`border: 1px solid ${t.stroke.brandLightAlt};`:"secondaryGray"===r?`border: 1px solid ${t.stroke.primary};`:"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.content.secondary};`:`border: 1px solid ${t.stroke.brandLightAlt};`:"",w=(r,n)=>"secondaryGray"===r?t.content.secondary:n?"primary"===r?t.content.primary:t.content.primaryInverse:"destructive"===r?t.content.negative:t.content.brand,I=(r,n,e,a,o,i)=>"chip"===r?a?t.content.inactive:i?t.content.primary:t.content.secondary:o?"transparent":"special"===n?a?t.content.inactive:t.background.inverseLight:"secondaryGray"===n?a?t.content.inactive:t.content.secondary:"primary"===n||"destructive"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primary:a?t.content.inactive:t.content.primaryInverse:"secondary"===n||"tertiary"===n?e?a?"rgba(255, 255, 255, 0.5)":t.content.primaryInverse:a?t.content.inactive:t.content.brand:"tertiaryGray"===n||n.startsWith("dash")?a?t.content.inactive:t.content.secondary:void 0;export{b as GetButtonTextComponent,w as SpinnerColorMap,$ as generateDisabledStyling,m as generateInverseHoverBackground,c as getBackgroundColor,g as getBorder,u as getBorderColor,I as getButtonIconColor,f as getClickEffect,d as getColor,v as getDashedBorderStyling,s as getDisabledTextColor,x as getHoverButtonBackground,y as getHoverButtonBackgroundCustom,k as getHoverButtonTextDecorationStyle,l as getLinearGradientValue,G as getLoadingBackground,L as getLoadingBorder,h as getLoadingButtonBackgroundCustom,p as getPadding};

package/dist/esm/components/carousel-preview/CarouselPreview.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"react";import l from"../../assets/icons/aiContentIcon.svg.js";import{AiContentBadge as t}from"../template-preview/TemplatePreview.styled.js";import s from"react-slick";import{Container as i,CarouselSlickContainer as n}from"./CarouselPreview.style.js";import a from"./CarouselPreviewCard.js";import{useTemplateModalContext as d}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as u}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as p,CustomCarouselLeftArrow as v}from"./CustomCarouselArrows.js";const w=o.forwardRef((o=>{let{channel:s,template:n,isPreview:p,removeBottomBorder:v,borderRadius:w,showArrows:C,hideBorder:f,showSampleValues:P}=o;var g,j;const{sliderRef:x,selectedCarouselIndex:I,cardCount:b,setIsCarouselHovered:R,cardIndex:S,showVariablePicker:A}=d(),V=-1==S?c(s):S,B=null===(j=null===(g=null==n?void 0:n.components)||void 0===g?void 0:g[V])||void 0===j?void 0:j.cards,T=(null==B?void 0:B.length)?e(h,{cards:B,cardCount:null!=b?b:0,selectedCarouselIndex:null!=I?I:-1,sliderRef:x,isPreview:p,showArrows:C,channel:s,template:n,setIsCarouselHovered:R,showSampleValues:!!P,showVariablePicker:A}):null;return m(s)?e(u,Object.assign({borderRadius:w},{children:T})):r(i,Object.assign({removeBottomBorder:v,borderRadius:w,hideBorder:f},{children:[(!!(null==n?void 0:n.aiContentConfigId)||!!(null==n?void 0:n.isAiGenerated))&&e(t,{children:e(l,{width:48,height:48})}),e(a,{channel:s,currentTemplate:n,carouselCardIndex:-1,isPreview:p,width:"77%"}),T]}))})),h=r=>{let{cards:o,cardCount:l,selectedCarouselIndex:t,sliderRef:i,isPreview:d,showArrows:c,channel:m,template:u,setIsCarouselHovered:w,showSampleValues:h,showVariablePicker:C}=r;return e(n,Object.assign({cardCount:l,selectedCarouselIndex:t,onMouseEnter:()=>!C&&(null==w?void 0:w(!0)),onMouseLeave:()=>!C&&(null==w?void 0:w(!1))},{children:e(s,Object.assign({ref:i,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e(p,{isPreview:null!=d&&d}),prevArrow:e(v,{isPreview:null!=d&&d})},{children:null==o?void 0:o.map(((r,o)=>{var l,t;const s={components:r.components,mapping:null===(t=null===(l=null==u?void 0:u.mapping)||void 0===l?void 0:l.cards)||void 0===t?void 0:t[o],content:null==u?void 0:u.content,templateType:null==u?void 0:u.templateType};return e(a,{channel:m,currentTemplate:s,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{w as CarouselPreview};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import o from"../../assets/icons/aiContentIcon.svg.js";import l from"react";import t from"react-slick";import{Container as s,CarouselSlickContainer as i}from"./CarouselPreview.style.js";import n from"./CarouselPreviewCard.js";import{AiContentBadge as a}from"../template-preview/TemplatePreview.styled.js";import{useTemplateModalContext as d}from"../template-context-mapper/context/templateModalContext.js";import{determineCardIndex as c,isRCSChannel as m}from"../template-preview/helpers/templateMiscHelper.js";import{RCSCarousalContainer as u}from"../template-preview/RCS/RCSPreview.styled.js";import{CustomCarouselRightArrow as p,CustomCarouselLeftArrow as v}from"./CustomCarouselArrows.js";const w=l.forwardRef((l=>{let{channel:t,template:i,isPreview:p,removeBottomBorder:v,borderRadius:w,showArrows:C,hideBorder:f,showSampleValues:P}=l;var g,j;const{sliderRef:x,selectedCarouselIndex:I,cardCount:b,setIsCarouselHovered:R,cardIndex:S,showVariablePicker:A}=d(),V=-1==S?c(t):S,B=null===(j=null===(g=null==i?void 0:i.components)||void 0===g?void 0:g[V])||void 0===j?void 0:j.cards,T=(null==B?void 0:B.length)?e(h,{cards:B,cardCount:null!=b?b:0,selectedCarouselIndex:null!=I?I:-1,sliderRef:x,isPreview:p,showArrows:C,channel:t,template:i,setIsCarouselHovered:R,showSampleValues:!!P,showVariablePicker:A}):null;return m(t)?e(u,Object.assign({borderRadius:w},{children:T})):r(s,Object.assign({removeBottomBorder:v,borderRadius:w,hideBorder:f},{children:[(!!(null==i?void 0:i.aiContentConfigId)||!!(null==i?void 0:i.isAiGenerated))&&e(a,{children:e(o,{width:48,height:48})}),e(n,{channel:t,currentTemplate:i,carouselCardIndex:-1,isPreview:p,width:"77%"}),T]}))})),h=r=>{let{cards:o,cardCount:l,selectedCarouselIndex:s,sliderRef:a,isPreview:d,showArrows:c,channel:m,template:u,setIsCarouselHovered:w,showSampleValues:h,showVariablePicker:C}=r;return e(i,Object.assign({cardCount:l,selectedCarouselIndex:s,onMouseEnter:()=>!C&&(null==w?void 0:w(!0)),onMouseLeave:()=>!C&&(null==w?void 0:w(!1))},{children:e(t,Object.assign({ref:a,swipeToSlide:!0,draggable:!0,swipe:!0,infinite:!1,focusOnSelect:!d,centerMode:!0,arrows:c,adaptiveHeight:!0,nextArrow:e(p,{isPreview:null!=d&&d}),prevArrow:e(v,{isPreview:null!=d&&d})},{children:null==o?void 0:o.map(((r,o)=>{var l,t;const s={components:r.components,mapping:null===(t=null===(l=null==u?void 0:u.mapping)||void 0===l?void 0:l.cards)||void 0===t?void 0:t[o],content:null==u?void 0:u.content,templateType:null==u?void 0:u.templateType};return e(n,{channel:m,currentTemplate:s,carouselCardIndex:o,isPreview:d,width:"100%",showSampleValues:h},o)}))}))}))};export{w as CarouselPreview};

package/dist/esm/components/country-code-picker/CountryCodePicker.d.ts

@@ -2,7 +2,7 @@ import { Placement, PositioningStrategy } from '@popperjs/core';
 import React from 'react';
 import { CountryCode } from "./CountryCodePicker.modal";
 export declare const CountryCodePicker: React.FC<{
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     onCountrySelect: (country: CountryCode) => void;
     selectedCountry: CountryCode;
     popoverWidth?: string;

package/dist/esm/components/country-code-picker/CountryPicker.d.ts

@@ -8,7 +8,7 @@ export interface CountryPickerProps {
     /**
      * Version of the dropdown popover to use
      */
-    version: '1.0' | '2.0';
+    version: '1.0' | '2.0' | '3.0';
     /**
      * Callback function when a country is selected
      */

package/dist/esm/components/dropdown/Dropdown.js

@@ -1 +1 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as l,useEffect as r}from"react";import{COLORS as s}from"../../constants/Theme.js";import a from"../../assets/icons/chevronDown.svg.js";import{Input as d}from"../input/Input.js";import{InputStyleContext as c}from"../input/context/InputStyleProvider.js";import p from"./ChipInput.js";import{DropdownPopover as h}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as u}from"./OpenedDropdown/utils/iterationOnOptions.js";function v(){}const m=m=>{var g,f,w,b,x,{placeHolder:j,size:O,onSelect:I,defaultOptions:y,disabled:S,noErrorHint:H,placeHolderHeight:T,showPlaceholderWhenSelected:D=!1,inputStyle:E={},inputType:P="default",onDeleteChip:C,truncatedText:M,showLeadingIconInPlaceholder:W=!1,showTrailingIconPlaceholder:L=!1,showLabelsOnMoreHover:k=!1,value:z,showSelected:A=!1}=m,_=e(m,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[N,U]=i(!1),[V,q]=i(!1),B=null!=O?O:"default",F=l(),[G,J]=i(null!=y?y:[]);r((()=>{var e;const o=[];null===(e=null==_?void 0:_.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),J([...o])}),[_.options]),r((()=>{y&&J([...y])}),[y]);const K=u(G),Q=D?j:null!==(g=null!=K?K:j)&&void 0!==g?g:"Select an option",R=_.buttonWidth,X=null!==(f=null!=R?R:_.width)&&void 0!==f?f:"100%",Y=null!==(w=_.dropdownWidth)&&void 0!==w?w:X;return o(n,{children:o(c.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:T||("x-small"===B?24:"small"===B?32:48),width:X},R?{maxWidth:R}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===B?"4px 8px":"6px 8px",backgroundColor:A&&void 0!==z?s.background.positive.light:V?"#E0E0E0":"#ffffff",transition:"background-color 0.3s ease"}),E),input:{minHeight:"100%",maxWidth:"100%",color:A&&void 0!==z?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>q(!0),onMouseLeave:()=>q(!1),style:_.width?{width:_.width}:void 0},{children:t(h,Object.assign({"data-test":_["data-test"],ref:F,onSelect:function(e){Array.isArray(e)?J([...e]):J([e]),null==I||I(e)},disabled:S,onDropdownVisbilityChange:e=>U(e)},_,{width:Y},{children:["default"==P&&o(d,{version:_.version,noErrorHint:H,state:S?"disabled":"none",value:void 0===z?Q:z,errorMessage:_.error,variant:B,placeholder:null!=j?j:"Select an option",onChangeText:v,leftIcon:W&&(null===(b=G[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=G[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[L&&(null===(e=G[0])||void 0===e?void 0:e.trailingIcon),o(a,{style:{transform:N?"rotate(180deg)":"rotate(0deg)"},onClick:v,width:"x-small"===B?16:"small"===B?20:24,height:"x-small"===B?16:"small"===B?20:24,color:A?s.content.positive:s.content.primary})]}))}},truncateText:null==M||M}),"chip"==P&&o(p,{placeholder:null!=j?j:"Select options",chips:G,onDeleteChip:e=>{null==C||C(e)},errorMessage:_.error,isDropdownOpened:N,sizeToUse:B,containerStyle:{width:null!==(x=_.width)&&void 0!==x?x:"100%",cursor:"pointer"},showLabelsOnMoreHover:k})]}))}))}))})};m.displayName="Dropdown";export{m as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,Fragment as n,jsxs as t}from"react/jsx-runtime";import{useState as i,useRef as r,useEffect as l}from"react";import{COLORS as s,BASE_COLORS as a}from"../../constants/Theme.js";import d from"../../assets/icons/chevronDown.svg.js";import{Input as c}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import h from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as v}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const g=g=>{var w,f,b,x,j,{placeHolder:O,size:I,onSelect:y,defaultOptions:S,disabled:H,noErrorHint:T,placeHolderHeight:D,showPlaceholderWhenSelected:P=!1,inputStyle:C={},inputType:M="default",onDeleteChip:W,truncatedText:E,showLeadingIconInPlaceholder:L=!1,showTrailingIconPlaceholder:k=!1,showLabelsOnMoreHover:z=!1,value:A,showSelected:_=!1}=g,N=e(g,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder","showTrailingIconPlaceholder","showLabelsOnMoreHover","value","showSelected"]);const[U,V]=i(!1),[q,B]=i(!1),F=null!=I?I:"default",G=r(),[J,K]=i(null!=S?S:[]);l((()=>{var e;const o=[];null===(e=null==N?void 0:N.options)||void 0===e||e.forEach((e=>{e.options?e.options.forEach((e=>{e.selected&&o.push(Object.assign(Object.assign({},e),{label:e.label}))})):e.selected&&o.push(e)})),K([...o])}),[N.options]),l((()=>{S&&K([...S])}),[S]);const Q=v(J),R=P?O:null!==(w=null!=Q?Q:O)&&void 0!==w?w:"Select an option",X=N.buttonWidth,Y=null!==(f=null!=X?X:N.width)&&void 0!==f?f:"100%",Z=null!==(b=N.dropdownWidth)&&void 0!==b?b:Y;return o(n,{children:o(p.Provider,Object.assign({value:{InputWrapper:Object.assign(Object.assign(Object.assign({height:D||("x-small"===F?24:"small"===F?32:48),width:Y},X?{maxWidth:X}:{}),{zIndex:1,cursor:"pointer",padding:"x-small"===F?"4px 8px":"6px 8px",backgroundColor:"3.0"===N.version?U||q?s.surface.hovered:s.surface.standard:_&&void 0!==A?a.positive[100]:q?s.background.inactive:s.surface.standard,transition:"background-color 0.3s ease"}),C),input:{minHeight:"100%",maxWidth:"100%",color:_&&void 0!==A?s.content.positive:"inherit"}}},{children:o("div",Object.assign({onMouseEnter:()=>B(!0),onMouseLeave:()=>B(!1),style:N.width?{width:N.width}:void 0},{children:t(u,Object.assign({"data-test":N["data-test"],ref:G,onSelect:function(e){Array.isArray(e)?K([...e]):K([e]),null==y||y(e)},disabled:H,onDropdownVisbilityChange:e=>V(e)},N,{width:Z},{children:["default"==M&&o(c,{version:N.version,noErrorHint:T,state:H?"disabled":"none",value:void 0===A?R:A,errorMessage:N.error,variant:F,placeholder:null!=O?O:"Select an option",onChangeText:m,leftIcon:L&&(null===(x=J[0])||void 0===x?void 0:x.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=J[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>{var e;return t("div",Object.assign({style:{display:"flex"}},{children:[k&&(null===(e=J[0])||void 0===e?void 0:e.trailingIcon),o(d,{style:{transform:U?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"x-small"===F?16:"small"===F?20:24,height:"x-small"===F?16:"small"===F?20:24,color:_?s.content.positive:s.content.primary})]}))}},truncateText:null==E||E}),"chip"==M&&o(h,{placeholder:null!=O?O:"Select options",chips:J,onDeleteChip:e=>{null==W||W(e)},errorMessage:N.error,isDropdownOpened:U,sizeToUse:F,containerStyle:{width:null!==(j=N.width)&&void 0!==j?j:"100%",cursor:"pointer"},showLabelsOnMoreHover:z})]}))}))}))})};g.displayName="Dropdown";export{g as Dropdown};

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: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 x=g,[R,E]=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])),E(!1),null===(n=null==S?void 0:S.onClose)||void 0===n||n.call(S)};s(x,(()=>({openDropdown:R})),[]),a((()=>{(null==x?void 0:x.current)&&(x.current.openDropdown=R)}),[R]),a((()=>{null==w||w(R)}),[R]);const P=()=>{var o;return t(n,{children:[t("div",Object.assign({style:Object.assign({position:"relative"},"3.0"===f&&{backgroundColor:R||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),R?(E(!1),o.preventDefault()):S.disabled||E(!0)},isChildLoading:C},{children:S.allowEvents?h:null})),S.allowEvents?null:h]})),(R||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,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"}},{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),E(!1))},onClose:N,version:f,headerRef:I,zeroState:null==S?void 0:S.zeroState,isDraggable:S.isDraggable,onOptionsReorder:S.onOptionsReorder}))}))}))]})};return e(n,{children:R||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/dropdown/OpenedDropdown/components/OpennedDropdown.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import o from"../../../../assets/icons/errorInfo.svg.js";import n from"../../../../assets/icons/refresh-purple.svg.js";import{useCallback as r,useState as i,useRef as s,useEffect as l}from"react";import{ZeroState as c}from"../../../zeroState/ZeroState.js";import{useOutside as a}from"../../../../hooks/useOutside.js";import{COLORS as u}from"../../../../constants/Theme.js";import{useDropdown as d}from"../../hooks/useDropdown.js";import{Description as p}from"./description/Description.js";import{FreeFormMenu as h}from"./menu/FreeFormMenu.js";import{MenuList as g}from"./menu/MenuList.js";import{SelectAllMenu as m}from"./menu/SelectAllMenu.js";import f from"./multiSelect/MultiSelectDropdownBottomBar.js";import{OpennedDropdownContainer as b,MenuListContainer as v}from"./OpennedDropdown.styled.js";import{SearchBox as S}from"./searchbox/SearchBox.js";import{SearchZeroState as j}from"./searchbox/SearchZeroState.js";const w=304,O=290,y=y=>{let{options:x,isSearchable:C,isMultiSelect:k,maxSelections:D,width:L,allowFreeForm:I,height:T,onClose:E,onSelect:M,onSearch:F,version:A,skipSorting:B,headerRef:H,hideSelectAll:R,primaryButtonText:q,onInfiniteScroll:z,onMultiSelectClear:P,onDropdownItemClick:V,buttonOptions:W,isSearchLoading:Z,isOptionsLoading:$,optionsErrorState:K,disableSearchOptions:N,disableSearchedOptionExcept:U,useDefaultCursor:G,containerStyle:J={},zeroState:Q,isDraggable:X=!1,onOptionsReorder:Y,hideClearButton:_=!1,showCheckboxForCustomElement:ee=!1}=y;var te;const oe=r((e=>{if(!X||!k)return e;const t=[],o=[];return e.forEach((e=>{if(e.options)o.push(e);else{e.selected?t.push(e):o.push(e)}})),[...t,...o]}),[X,k]),[ne,re]=i((()=>oe(x))),ie=s(ne),se=s(!1),le=s(Y);l((()=>{re(oe(x))}),[x,oe]),l((()=>{ie.current=ne}),[ne]),l((()=>{le.current=Y}),[Y]),l((()=>()=>{se.current&&le.current&&le.current(ie.current)}),[]);const ce=r((e=>{re(e),"2.0"===A?null==Y||Y(e):se.current=!0}),[Y,A]),ae=X?ne:x,{dropdownOptions:ue,search:de,searchedString:pe,searchedOptions:he,searchError:ge,retrySearch:me,onApplyHandler:fe,selectAllHandler:be,onMultiSelectClear:ve,onFreeFormSelect:Se,onMultiSelectApply:je,latestDropdownOptionsRef:we,getSelectedOptions:Oe,getCurrentSelectionCount:ye}=d(A,ae,M,B||X,k,F,N,U,D),[xe,Ce]=i(null!=L?L:O),[ke,De]=i(null),[Le,Ie]=i(-1),Te=s(null),Ee=s([]),Me=s(null);a(Te,(()=>{if(De(null),k&&"2.0"===A){const e=Oe(we.current);null==E||E(e)}else null==E||E(ue)}),[H,Ee]),l((()=>{const e=setTimeout((()=>{Te.current&&Te.current.focus({preventScroll:!0})}),0);return()=>clearTimeout(e)}),[]);l((()=>{const e=e=>{const t=(e=>{const t=[];return e.forEach((e=>{if(e.options)e.options.forEach((e=>{e.disabled||t.push(e)}));else{const o=e;o.disabled||t.push(o)}})),t})(pe&&F?he:ue);if(0!==t.length)if("ArrowDown"===e.key)e.preventDefault(),Ie((e=>{const o=e<t.length-1?e+1:0;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("ArrowUp"===e.key)e.preventDefault(),Ie((e=>{const o=e>0?e-1:t.length-1;return setTimeout((()=>{var e;const t=null===(e=Me.current)||void 0===e?void 0:e.querySelector(`[data-option-index="${o}"]`);t&&t.scrollIntoView({block:"nearest",behavior:"smooth"})}),0),o}));else if("Enter"===e.key&&Le>=0){e.preventDefault();const o=t[Le];o&&(fe(Object.assign(Object.assign({},o),{selected:!o.selected})),V&&V(o))}},t=Te.current;if(t)return t.addEventListener("keydown",e),()=>{t.removeEventListener("keydown",e)}}),[Le,pe,he,ue,F,fe,V]);const Fe=null!=T?T:w,Ae="number"==typeof Fe?C&&k?Fe-96:C&&!k||!C&&k?Fe-48:Fe:Fe;l((()=>{const e=null!=L?L:O;if(null===ke)Ce(e);else if("number"==typeof e)Ce(2*e);else if("string"==typeof e&&e.endsWith("px")){const t=2*parseInt(e.replace("px",""));Ce(t)}}),[ke]);const Be=[],He=(e=>{if(!k||!D&&0!==D)return e;const t=ye(ue)>=D;return t?e.map((e=>{if(e.options)return Object.assign(Object.assign({},e),{options:e.options.map((e=>Object.assign(Object.assign({},e),{disabled:e.disabled||!e.selected&&t})))});{const o=e;return Object.assign(Object.assign({},o),{disabled:o.disabled||!o.selected&&t})}})):e})((pe&&F?he:ue).map((e=>{var t,o;if(pe&&!F){if(e.options){const t=Object.assign({},e);return t.options=t.options.filter((e=>{var t;return!!(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))&&(Be.push(!pe||e.label===pe),!0)})),t.options.length>0?t:null}return(null===(t=e.label)||void 0===t?void 0:t.toLowerCase().includes(pe.toLowerCase()))||(null===(o=e.searchKey)||void 0===o?void 0:o.toLowerCase().includes(pe.toLowerCase()))?(Be.push(!pe||e.label===pe),e):null}return e})).filter((e=>null!==e))),Re=!!C&&pe&&0===He.length,qe=!pe&&!!$,ze=!pe&&!!K&&!qe,Pe=!(pe||He.length||qe||ze),Ve=qe||ze||Pe,We=(null==Q?void 0:Q.title)||"No results found",Ze=(null==Q?void 0:Q.subTitle)||"Please try again later or contact us at support@bik.ai if you require further assistance.",$e=(null==K?void 0:K.title)||"Failed to load options",Ke=(null==K?void 0:K.subTitle)||"Something went wrong while fetching the list. Please try again",Ne={buttonText:"Try again",buttonType:"text",size:"small",buttonTextColor:u.background.inverseLight,customIconColor:u.background.inverseLight,LeadingIcon:n},Ue=Object.assign({IconHolderStyle:{background:u.background.negative.light},Icon:e(o,{color:u.content.negative,width:24,height:24})},K);Ue.actionButton=Object.assign(Object.assign({},Ne),null!==(te=null==K?void 0:K.actionButton)&&void 0!==te?te:{});const Ge=qe?void 0:ze?Ue:Q;return t(b,Object.assign({version:A,ref:Te,tabIndex:-1,style:Object.assign(Object.assign({width:xe},J),{outline:"none"})},{children:[t("div",Object.assign({style:{width:ke?"50%":"100%",display:"flex",flexDirection:"column",background:"white"}},{children:[!!C&&e(S,{onSearch:de,version:A}),Ve?e("div",Object.assign({style:{height:Fe,display:"flex",background:u.background.base}},{children:e(c,Object.assign({},null!=Ge?Ge:{},{isLoading:qe,title:ze?$e:We,subTitle:ze?Ke:Ze}))})):t(v,Object.assign({minHeight:Fe,maxHeight:Ae,ref:Me},{children:[!!k&&!Re&&!R&&e(m,{version:A,options:pe&&F?he:ue,onSelect:be}),!I&&Re&&e(j,{isLoading:Z,errorMessage:ge,onRetry:me,height:Ae,searchedString:pe,containerWidth:L,version:A}),I&&(Re||!!Be.length&&Be.every((e=>!1===e)))&&e(h,{version:A,isMultiSelect:k,onSelect:Se,searchedString:pe}),e(g,{onInfiniteScroll:z,onDropdownItemClick:V,version:A,onSelect:fe,showDescription:function(e,t){De(e&&t?{title:e,description:t}:null)},isMultiSelect:k,options:He,useDefaultCursor:G,ref:Ee,focusedIndex:Le,isDraggable:X,onOptionsReorder:ce,showCheckboxForCustomElement:ee})]})),!!k&&!Ve&&"2.0"!==A&&e(f,{onClear:()=>{ve(),null==P||P()},onApply:je,list:pe&&F?he:ue,buttonText:q,buttonOptions:W,hideClearButton:_})]})),!!ke&&e(p,{title:ke.title,description:ke.description,version:A})]}))};export{y as OpenedDropdown};

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.d.ts

@@ -1,5 +1,5 @@
 export declare const OpennedDropdownContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;
 export declare const ItemContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const MenuListContainer: import("styled-components").StyledComponent<"div", any, {

package/dist/esm/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js

@@ -1,7 +1,8 @@
 import o from"styled-components";import{COLORS as r}from"../../../../constants/Theme.js";const e=o.div`
 	border-radius: ${o=>"2.0"===o.version?8:4}px;
-	border: ${o=>"2.0"===o.version?0:1}px solid
-		${r.stroke.primary};
+	border: ${o=>"2.0"===o.version||"3.0"===o.version?0:1}px
+		solid ${r.stroke.primary};
+	box-shadow: ${o=>"3.0"===o.version?"0px 2px 8px 0px rgba(0, 0, 0, 0.12)":"none"};
 	max-height: 480px;
 	overflow: hidden;
 	display: flex;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 export declare const Description: React.FC<{
     title: string;
     description: string;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/description/Description.styled.d.ts

@@ -1,3 +1,3 @@
 export declare const DescriptionContainer: import("styled-components").StyledComponent<"div", any, {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/FreeFormMenu.d.ts

@@ -3,5 +3,5 @@ export declare const FreeFormMenu: React.FC<{
     isMultiSelect?: boolean;
     searchedString: string;
     onSelect: (isChecked: boolean) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.d.ts

@@ -7,7 +7,7 @@ interface MenuItemProps {
     onSelect: (option: SingleOption) => void;
     onDropdownItemClick?: (option: SingleOption) => void;
     last?: boolean;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     useDefaultCursor?: boolean;
     isFocused?: boolean;
     dataIndex?: number;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,5 +1,5 @@
 import{jsx as e,Fragment as o,jsxs as n}from"react/jsx-runtime";import t from"../../../../../assets/icons/chevronRight.svg.js";import{forwardRef as r,useState as i}from"react";import s from"styled-components";import{CheckBox as l}from"../../../../checkBox/CheckBox.js";import{ListItem as a}from"../../../../list-item/ListItem.js";import{Tooltip as d}from"../../../../tooltips/Tooltip.js";import{BodyCaption as c}from"../../../../TypographyStyle.js";import{DEFAULT_THEME as p,COLORS as g}from"../../../../../constants/Theme.js";import{FreeFormContainer as m}from"./FreeFormMenu.styled.js";const u=s(a)`
-	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
+	padding: ${e=>"3.0"===e.version?"8px":"2.0"===e.version?"8px 12px":"14px 16px"} !important;
 	cursor: pointer;
 	margin-top: ${e=>"2.0"===e.version?"2px":"0"};
 `,h=s.div`

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.d.ts

@@ -5,7 +5,7 @@ interface MenuListProps {
     isMultiSelect?: boolean;
     showDescription: (title?: string, description?: string) => void;
     onSelect: (optionSelect: SingleOption) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     onInfiniteScroll?: () => void;
     onDropdownItemClick?: (option: DropdownOption) => void;
     useDefaultCursor?: boolean;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/MenuList.styled.d.ts

@@ -2,5 +2,5 @@ export declare const StyledGroupedLabel: import("styled-components").StyledCompo
     numberOfLines?: number | undefined;
     color?: string | undefined;
 } & {
-    version?: "1.0" | "2.0" | undefined;
+    version?: "1.0" | "2.0" | "3.0" | undefined;
 }, never>;

package/dist/esm/components/dropdown/OpenedDropdown/components/menu/SelectAllMenu.d.ts

@@ -4,5 +4,5 @@ export type SelectAllCheckboxState = 'notSelected' | 'selectAll' | 'partiallySel
 export declare const SelectAllMenu: React.FC<{
     options: DropdownOption[];
     onSelect: (newState: SelectAllCheckboxState) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const SearchBox: React.FC<{
     onSearch: (searchString: string) => void;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

@@ -1 +1 @@
-import{jsx as o,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as e}from"../../../../icon-button/IconButton.js";import{Input as n}from"../../../../input/Input.js";import{InputStyleContext as i}from"../../../../input/context/InputStyleProvider.js";import{COLORS as s}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import p from"../../../../../assets/icons/search.svg.js";const a=a=>{let{onSearch:m,version:l}=a;const[h,d]=t(""),[u,f]=t(!1);return o(i.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===l?.5:1}px solid ${s.stroke.primary}`,padding:""+("2.0"===l?"6px 8px":"14px 16px")},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:o(n,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===l?"small":"default",leftIcon:{icon:()=>o(p,{width:"2.0"===l?18:24,height:"2.0"===l?18:24,color:s.content.placeholder})},rightIcon:{icon:()=>h?o(e,{onClick:()=>{f(!0),m(""),d("")},Icon:c,width:"2.0"===l?18:24,height:"2.0"===l?18:24,iconColor:s.content.placeholder}):o(r,{})},reset:u,onChangeText:o=>{f(!1),d(o),m(o)}})}))};export{a as SearchBox};
+import{jsx as o,Fragment as r}from"react/jsx-runtime";import{useState as t}from"react";import{IconButton as e}from"../../../../icon-button/IconButton.js";import{Input as n}from"../../../../input/Input.js";import{InputStyleContext as i}from"../../../../input/context/InputStyleProvider.js";import{COLORS as s}from"../../../../../constants/Theme.js";import c from"../../../../../assets/icons/cross.svg.js";import p from"../../../../../assets/icons/search.svg.js";const a=a=>{let{onSearch:m,version:l}=a;const[h,d]=t(""),[u,f]=t(!1);return o(i.Provider,Object.assign({value:{InputWrapper:{borderRadius:0,border:0,borderBottom:`${"2.0"===l||"3.0"===l?.5:1}px solid ${s.stroke.primary}`,padding:""+("2.0"===l||"3.0"===l?"6px 8px":"14px 16px")},IconHolder:{marginLeft:0},input:{marginLeft:4,minHeight:"100%"}}},{children:o(n,{noKeyDownChange:!0,skipFocus:!0,placeholder:"Search",variant:"2.0"===l||"3.0"===l?"small":"default",leftIcon:{icon:()=>o(p,{width:"2.0"===l||"3.0"===l?18:24,height:"2.0"===l||"3.0"===l?18:24,color:s.content.placeholder})},rightIcon:{icon:()=>h?o(e,{onClick:()=>{f(!0),m(""),d("")},Icon:c,width:"2.0"===l||"3.0"===l?18:24,height:"2.0"===l||"3.0"===l?18:24,iconColor:s.content.placeholder}):o(r,{})},reset:u,onChangeText:o=>{f(!1),d(o),m(o)}})}))};export{a as SearchBox};

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.d.ts

@@ -6,4 +6,5 @@ export declare const SearchZeroState: React.FC<{
     containerWidth?: string;
     errorMessage?: string;
     onRetry?: () => void;
+    version?: '1.0' | '2.0' | '3.0';
 }>;

package/dist/esm/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

@@ -1 +1 @@
-import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";const o=o=>{let{searchedString:i,height:n,isLoading:r,containerWidth:s,errorMessage:a,onRetry:l}=o;const d=!!a&&!r;return t("div",Object.assign({style:{height:n,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:r,title:d?"Failed to load options":"No results found",subTitle:d?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:d?{buttonText:"Try again",buttonType:"text",onClick:l}:void 0,containerWidth:s})}))};export{o as SearchZeroState};
+import{jsx as t}from"react/jsx-runtime";import{ZeroState as e}from"../../../../zeroState/ZeroState.js";import{COLORS as n}from"../../../../../constants/Theme.js";const o=o=>{let{searchedString:i,height:r,isLoading:s,containerWidth:l,errorMessage:a,onRetry:c,version:d}=o;const h=!!a&&!s;return t("div","3.0"!==d||h||s?Object.assign({style:{height:r,display:"flex",alignItems:"center"}},{children:t(e,{isLoading:s,title:h?"Failed to load options":"No results found",subTitle:h?a:`Sorry we could not find any results for "${null!=i?i:""}"`,actionButton:h?{buttonText:"Try again",buttonType:"text",onClick:c}:void 0,containerWidth:l})}):Object.assign({style:{height:r,display:"flex",alignItems:"center",justifyContent:"center"}},{children:t("span",Object.assign({style:{fontFamily:"Inter",fontSize:"12px",fontWeight:400,lineHeight:"16px",color:n.content.placeholder,whiteSpace:"nowrap"}},{children:"No results found!"}))}))};export{o as SearchZeroState};

package/dist/esm/components/dropdown/type.d.ts

@@ -17,7 +17,7 @@ export interface OpenDropdownProps {
     placement?: Placement;
     strategy?: PositioningStrategy;
     onSearch?: (key: string) => Promise<DropdownOption[]>;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
     skipSorting?: boolean;
     headerRef?: any;
     hideSelectAll?: boolean;

package/dist/esm/components/dropdown-button/DropdownButton.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
 import { DropdownProps } from "../dropdown";
 import { ButtonProps } from '../button/model';
+import { IconButtonProps } from '../icon-button/model';
 export interface DropdownButtonProps {
     dropdownProps: DropdownProps;
-    buttonProps: ButtonProps;
     iconProps: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+    buttonProps?: ButtonProps;
+    iconButtonProps?: IconButtonProps;
 }
 export declare const DropdownButton: React.FC<DropdownButtonProps>;

package/dist/esm/components/dropdown-button/DropdownButton.js

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as r}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"../../constants/Theme.js";import"lodash/debounce";import"../TypographyStyle.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import{Button as e}from"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{SpinnerColorMap as p}from"../button/themes.js";import{Spinner as s}from"../spinner/Spinner.js";import{DropdownButtonStyle as i,LoaderContainer as d}from"./DropdownButton.style.js";const m=m=>{var u,l;const a=m.buttonProps,c=o(a,["onClick"]);return t(i,Object.assign({type:m.buttonProps.buttonType,disabled:m.buttonProps.disabled},{children:[(null===(u=m.buttonProps)||void 0===u?void 0:u.isLoading)&&n(d,{children:n(s,{className:"spinner",size:"small",color:p(m.buttonProps.buttonType||"primary",m.buttonProps.inverse)})}),n(e,Object.assign({},m.buttonProps,{isLoading:!1,style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"}})),n("div",{className:"dd-button-divider"}),n(r,Object.assign({},m.dropdownProps,{isChildLoading:null===(l=m.buttonProps)||void 0===l?void 0:l.isLoading},{children:n(e,Object.assign({},c,{isLoading:!1,buttonText:"",TrailingIcon:m.iconProps,style:{borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}}))}))]}))};export{m as DropdownButton};
+import{__rest as o}from"../../_virtual/_tslib.js";import{jsxs as t,jsx as n}from"react/jsx-runtime";import{DropdownPopover as i}from"../dropdown/DropdownPopover/index.js";import"../dropdown/Dropdown.js";import"../dropdown/ChipDropdown.js";import"react";import"../zeroState/ZeroState.js";import"../../constants/Theme.js";import"lodash/debounce";import"../TypographyStyle.js";import"../dropdown/OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"../dropdown/OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../dropdown/OpenedDropdown/components/menu/MenuItem.js";import"../dropdown/OpenedDropdown/components/menu/MenuList.styled.js";import{Button as e}from"../button/Button.js";import"../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as r}from"../icon-button/IconButton.js";import"../input/Input.js";import"../dropdown/MenuItem/MenuItem.js";import{SpinnerColorMap as s}from"../button/themes.js";import{Spinner as d}from"../spinner/Spinner.js";import{DropdownButtonStyle as p,LoaderContainer as u}from"./DropdownButton.style.js";const l=l=>{var m,a,c,b,j,y,v,g,x;const w=!!l.iconButtonProps,P=w?null===(m=l.iconButtonProps)||void 0===m?void 0:m.disabled:null===(a=l.buttonProps)||void 0===a?void 0:a.disabled;if(w){const{iconButtonProps:o}=l;return t(p,Object.assign({type:void 0,disabled:P,isIconButton:!0,iconButtonType:null!==(c=null==o?void 0:o.iconButtonType)&&void 0!==c?c:"primary",iconButtonSize:null!==(b=null==o?void 0:o.size)&&void 0!==b?b:"default"},{children:[n(r,Object.assign({},o,{style:{borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px"}})),n("div",{className:"dd-button-divider"}),n("div",Object.assign({style:{display:"flex",alignItems:"center"}},{children:n(i,Object.assign({},l.dropdownProps,{isChildLoading:!1},{children:n(r,{Icon:l.iconProps,iconButtonType:null!==(j=null==o?void 0:o.iconButtonType)&&void 0!==j?j:"primary",size:null==o?void 0:o.size,disabled:P,style:{display:"flex",borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"}})}))}))]}))}const h=l.buttonProps,B=o(h,["onClick","LeadingIcon","LeadingIconStyles","IconComponent","TrailingIcon"]);return t(p,Object.assign({type:l.buttonProps.buttonType,disabled:l.buttonProps.disabled,size:l.buttonProps.size},{children:[(null===(y=l.buttonProps)||void 0===y?void 0:y.isLoading)&&n(u,Object.assign({type:l.buttonProps.buttonType},{children:n(d,{className:"spinner",size:"small",color:s(l.buttonProps.buttonType||"primary",l.buttonProps.inverse)})})),n(e,Object.assign({},l.buttonProps,{isLoading:!1,style:Object.assign({borderRadius:"0px",borderTopLeftRadius:"4px",borderBottomLeftRadius:"4px",borderRight:"0px"},"xs"===(null===(v=l.buttonProps)||void 0===v?void 0:v.size)?{border:"none",borderRadius:"0px"}:{})})),n("div",{className:"dd-button-divider"}),n(i,Object.assign({},l.dropdownProps,{isChildLoading:null===(g=l.buttonProps)||void 0===g?void 0:g.isLoading},{children:n(e,Object.assign({},B,{isLoading:!1,buttonText:"",TrailingIcon:l.iconProps,style:Object.assign({borderRadius:"0px",borderTopRightRadius:"4px",borderBottomRightRadius:"4px"},"xs"===(null===(x=l.buttonProps)||void 0===x?void 0:x.size)?{border:"none",borderRadius:"0px"}:{})}))}))]}))};export{l as DropdownButton};

package/dist/esm/components/dropdown-button/DropdownButton.style.d.ts

@@ -1,6 +1,13 @@
-import { Type } from '../button/model';
+import { Size, Type } from '../button/model';
+import { IconButtonType } from '../icon-button/model';
 export declare const DropdownButtonStyle: import("styled-components").StyledComponent<"div", any, {
     type: Type | undefined;
     disabled: boolean | undefined;
+    isIconButton?: boolean | undefined;
+    iconButtonType?: IconButtonType | undefined;
+    iconButtonSize?: "default" | "xs" | undefined;
+    size?: Size | undefined;
+}, never>;
+export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {
+    type: Type | undefined;
 }, never>;
-export declare const LoaderContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown-button/DropdownButton.style.js

@@ -1,12 +1,16 @@
-import t from"styled-components";import{BASE_COLORS as e,COLORS as i}from"../../constants/Theme.js";const n=t.div`
+import t from"styled-components";import{COLORS as e}from"../../constants/Theme.js";const n=t.div`
 	display: flex;
 	flex-direction: row;
 	width: max-content;
 	position: relative;
 	align-items: stretch;
+	${t=>{var n,r,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${r=null!==(n=t.iconButtonType)&&void 0!==n?n:"primary",i=t.disabled,i?e.background.inactive:"primary"===r?e.background.inverseLight:"transparent"};\n\t\theight: ${"xs"===t.iconButtonSize?"24px":"32px"};\n\t\talign-items: center;\n\t`}}
+	${t=>("xs"===t.size||"xs"===t.iconButtonSize)&&`\n\t\theight: 24px;\n\t\talign-items: center;\n\t\tborder-radius: 4px;\n\t\t${!t.isIconButton&&t.type?`border: 1px solid ${t.disabled||"secondaryGray"===t.type?e.stroke.primary:"secondary"===t.type?e.stroke.brand:"transparent"};`:""}\n\t`}
 	.dd-button-divider {
-		width: ${t=>["primary","destructive"].includes(t.type)?"1px":"0px"};
-		background-color: ${t=>{return e=t.type,(null==t?void 0:t.disabled)?i.content.inactive:"primary"===e?"#CDA2FC":i.content.primaryInverse;var e}};
+		width: ${t=>["primary","destructive"].includes(t.type)||t.isIconButton||"xs"===t.size?"1px":"0px"};
+		height: ${t=>t.isIconButton||"xs"===t.size?"12px":"auto"};
+		flex-shrink: 0;
+		background-color: ${t=>{return t.isIconButton?"rgba(255, 255, 255, 0.3)":"xs"===t.size?e.stroke.primary:(n=t.type,(null==t?void 0:t.disabled)?e.content.inactive:"primary"===n?"#CDA2FC":e.content.primaryInverse);var n}};
 	}
 `,r=t.div`
 	position: absolute;
@@ -17,6 +21,6 @@ import t from"styled-components";import{BASE_COLORS as e,COLORS as i}from"../../
 	justify-content: center;
 	width: 100%;
 	border-radius: 4px;
-	background: ${e.brand[50]};
+	background: ${t=>(t=>{switch(t){case"destructive":return e.background.negative.light;case"secondaryGray":return e.surface.subdued;default:return e.background.brandLight}})(t.type)};
 	z-index: 3;
 `;export{n as DropdownButtonStyle,r as LoaderContainer};

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/esm/components/fab-menu/FABMenu.d.ts

@@ -21,5 +21,5 @@ export declare const FABMenu: React.FC<{
     isRound?: boolean;
     dropPosition?: DROP_POSITION;
     menuAligment?: MENU_ALIGNMENT;
-    version?: '1.0' | '2.0';
+    version?: '1.0' | '2.0' | '3.0';
 }>;

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 e}from"../../_virtual/_tslib.js";import{jsx as t}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 d}from"./theme.js";const n=i(((i,n)=>{var{id:r,iconButtonType:c="default",size:a="default",Icon:p,height:b,width:m,bordered:u,disabled:y,isSelected:h,style:g,svgStyle:f,iconColor:j,iconPadding:B,disabledTooltip:T}=i,I=e(i,["id","iconButtonType","size","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const S="xs"===a?16:20,v=null!=b?b:S,w=null!=m?m:S,O=d(c,y,h),x=t(s,Object.assign({id:r,ref:n,style:g,iconButtonType:c,bordered:u,disabled:y,isSelected:h,iconPadding:B,size:a},I,{children:o.createElement(p,{height:v,width:w,color:j||O,style:Object.assign({display:"block"},null!=f?f:{})})}));return y&&T?t(l,Object.assign({body:T},{children:t("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:x}))})):x}));n.displayName="IconButton";export{n as IconButton};

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

@@ -1,6 +1,8 @@
-import { IconButtonType } from './model';
+import { IconButtonSize, IconButtonType } from './model';
 export declare const IconButton: import("styled-components").StyledComponent<"button", any, {
     bordered?: boolean | undefined;
     iconButtonType: IconButtonType;
     isSelected?: boolean | undefined;
+    iconPadding?: number | undefined;
+    size?: IconButtonSize | 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:"xs"===t.size?4:6}px;\n\tborder-radius: 4px;\n\tflex-wrap: wrap;\n\t${t.bordered&&"ai"!==t.iconButtonType&&"primary"!==t.iconButtonType?`border: 1px solid ${n.stroke.primary};`:""}\n\t${"primary"===t.iconButtonType?`\n\t\t\t\tbackground: ${o("primary")};\n\t\t\t\t${t.isSelected?"":`:hover { background-color: ${n.background.inverse}; }`}\n\t\t\t\t:active { box-shadow: inset 0px 4px 12px rgba(0, 0, 0, 0.35); }\n\t\t\t`:t.isSelected?`background: ${o(t.iconButtonType)};`:"\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?"primary"===t.iconButtonType?`\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: ${n.background.inactive};\n\t\t\t\t\t:hover { background-color: ${n.background.inactive}; }\n\t\t\t\t`:"\n\t\t\t\t\tcursor: not-allowed !important;\n\t\t\t\t\tbackground-color: rgba(0, 0, 0, 0.03);\n\t\t\t\t":""}\n\n\t`}
 `;export{r as IconButton};

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai';
+export type IconButtonType = 'default' | 'negative' | 'positive' | 'warning' | 'ai' | 'primary';
+export type IconButtonSize = 'default' | 'xs';
 export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Icon to render
@@ -30,6 +31,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
      * @default default default
      */
     iconButtonType?: IconButtonType;
+    /**
+     * Size of the icon button
+     * @default 'default'
+     */
+    size?: IconButtonSize;
     /**
      * Add border to the button
      * @default default false
@@ -40,5 +46,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/icon-button/theme.js

@@ -1 +1 @@
-import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:"ai"===n?t.surface.aiLight:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};
+import{COLORS as t}from"../../constants/Theme.js";const n=(n,e,r)=>{if(e)return t.content.inactive;switch(n){case"default":return r?t.content.brand:t.content.primary;case"negative":return t.content.negative;case"positive":return t.content.positive;case"warning":return r?t.content.warning:t.content.primary;case"primary":return t.content.primaryInverse;default:return t.content.primary}},e=n=>"default"===n?t.background.brandLight:"negative"===n?t.background.negative.light:"positive"===n?t.background.positive.light:"ai"===n?t.surface.aiLight:"primary"===n?t.background.inverseLight:t.background.warning.light;export{e as generateBackgroundColor,n as getIconColor};