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

package/dist/cjs/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/cjs/components/button/themes.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");const n=(r,n,e)=>e?t.COLORS.stroke.negative.vibrant:n?t.COLORS.surface.standard:"secondary"==r?t.COLORS.stroke.brand:t.COLORS.content.placeholder,e=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",o=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),o=(n>>16)+e,a=(n>>8&255)+e,i=(255&n)+e;return`#${(16777216+(Math.min(o,255)<<16)+(Math.min(a,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`};exports.GetButtonTextComponent=(t,n,e)=>e||"ai"!==n?"dashRegular"===n?r.BodySecondary:"chip"===t?r.BodyCaption:"small"===t?r.ButtonRegular:r.ButtonLarge:"small"===t?r.ButtonRegularAI:r.ButtonLargeAI,exports.SpinnerColorMap=(r,n)=>n?"primary"===r?t.COLORS.content.primary:t.COLORS.content.primaryInverse:"destructive"===r?t.COLORS.content.negative:t.COLORS.content.brand,exports.generateDisabledStyling=(r,n,e)=>"chip"===n?"background-color: transparent;":"primary"===r||"destructive"===r?e?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.COLORS.background.inactive};`:"secondary"===r?e?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.COLORS.stroke.primary};`:"",exports.generateInverseHoverBackground=(r,n)=>n?"":"primary"===r?`background-color: ${t.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",exports.getBackgroundColor=(r,n,e,o,a)=>{if("chip"===n)return"text"===r?"transparent":o?t.COLORS.surface.hovered:t.COLORS.surface.subdued;switch(r){case"primary":return a||(e?t.COLORS.background.warning.vibrant:t.COLORS.background.inverseLight);case"destructive":return t.COLORS.background.negative.vibrant;default:return"transparent"}},exports.getBorder=(r,e,o,a,i)=>"text"==e?"border: none;":"chip"===o?`border: ${"2.0"===r?.5:1}px solid ${t.COLORS.stroke.primary};`:a?"secondary"===e?`border: ${"2.0"===r?.5:1}px solid ${n(e,a,i)};`:"border: none;":"secondary"===e?`border: ${"2.0"===r?.5:1}px solid ${n(e,!1,i)};`:"border: none;",exports.getBorderColor=n,exports.getButtonIconColor=(r,n,e,o,a,i)=>"chip"===r?o?t.COLORS.content.inactive:i?t.COLORS.content.primary:t.COLORS.content.secondary:a?"transparent":"primary"===n||"destructive"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primary:o?t.COLORS.content.inactive:t.COLORS.content.primaryInverse:"secondary"===n||"tertiary"===n?e?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primaryInverse:o?t.COLORS.content.inactive:t.COLORS.content.brand:"tertiaryGray"===n||n.startsWith("dash")?o?t.COLORS.content.inactive:t.COLORS.content.secondary:void 0,exports.getClickEffect=(r,n,e)=>"text"===r?`background-color: ${t.COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`:"chip"===n?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${t.COLORS.background.brandLight};`:"primary"===r||"destructive"===r?e?`background-color: ${t.COLORS.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.COLORS.background.inverseLight}  !important;`:`background-color: ${t.COLORS.background.brandLight};`:void 0,exports.getColor=(r,n,e,o)=>{if("chip"===n)return"text"===r?e?t.COLORS.content.inactive:t.COLORS.content.brand:o?t.COLORS.content.primary:t.COLORS.content.secondary;switch(r){case"primary":return e?t.COLORS.content.primary:t.COLORS.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.COLORS.content.secondary;case"destructive":return t.COLORS.content.primaryInverse;case"ai":return t.COLORS.content.ai;default:return e?t.COLORS.content.primaryInverse:t.COLORS.stroke.brand}},exports.getDashedBorderStyling=function(t,r){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:n(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${o},\n\t\t\t${o}\n\t\t\t\t${e(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${o},\n\t\t\t${o}\n\t\t\t\t${e(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${o},\n\t\t\t${o}\n\t\t\t\t${e(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${o},\n\t\t\t${o}\n\t\t\t\t${e(r)}\n\t\t);\n\t}\n\t`},exports.getDisabledTextColor=r=>r?"rgba(255, 255, 255, 0.5)":t.COLORS.content.inactive,exports.getHoverButtonBackground=(r,n)=>"ai"===r?`background: ${t.COLORS.surface.aiLight};`:"text"===r?"background-color:transparent;":n||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",exports.getHoverButtonBackgroundCustom=(t,r)=>{const n=parseInt(t.replace("#",""),16),e=Math.round(2.55*r),o=(n>>16)-e,a=(n>>8&255)-e,i=(255&n)-e;return`#${(16777216+(Math.max(o,0)<<16)+(Math.max(a,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},exports.getHoverButtonTextDecorationStyle=(r,n)=>n?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`,exports.getLinearGradientValue=e,exports.getLoadingBackground=(r,n,e,a)=>"chip"===n?`background-color: ${t.COLORS.background.base};`:"primary"===r?a?`background-color: ${o(a,50)};`:`background-color: ${e?t.COLORS.background.warning.vibrant:t.COLORS.background.brandLight};`:"destructive"===r?`background-color: ${t.COLORS.background.negative.light};`:"background-color: transparent;",exports.getLoadingBorder=(r,n,e)=>"chip"===n?"border: none;":"secondary"===r?e?`border: 1px solid ${t.COLORS.content.secondary};`:`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"",exports.getLoadingButtonBackgroundCustom=o,exports.getPadding=(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"}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("../../constants/Theme.js"),r=require("../TypographyStyle.js");const e=(r,e,n)=>n?t.COLORS.stroke.negative.vibrant:e?t.COLORS.surface.standard:"secondary"==r?t.COLORS.stroke.brand:t.COLORS.content.placeholder,n=t=>"medium"===t?"5px,\n\t\ttransparent 5px,\n\t\ttransparent 10px":"6px,\n\t\ttransparent 6px,\n\t\ttransparent 12px",o=(t,r)=>{const e=parseInt(t.replace("#",""),16),n=Math.round(2.55*r),o=(e>>16)+n,a=(e>>8&255)+n,i=(255&e)+n;return`#${(16777216+(Math.min(o,255)<<16)+(Math.min(a,255)<<8)+Math.min(i,255)).toString(16).slice(1)}`};exports.GetButtonTextComponent=(t,e,n)=>n||"ai"!==e?"dashRegular"===e?r.BodySecondary:"chip"===t||"xs"===t?r.BodyCaption:"small"===t?r.ButtonRegular:r.ButtonLarge:"small"===t?r.ButtonRegularAI:r.ButtonLargeAI,exports.SpinnerColorMap=(r,e)=>"secondaryGray"===r?t.COLORS.content.secondary:e?"primary"===r?t.COLORS.content.primary:t.COLORS.content.primaryInverse:"destructive"===r?t.COLORS.content.negative:t.COLORS.content.brand,exports.generateDisabledStyling=(r,e,n)=>"special"===r?`background-color: ${t.COLORS.background.base}; border: 1px solid ${t.COLORS.stroke.primary};`:"secondaryGray"===r?`border: 1px solid ${t.COLORS.stroke.primary};`:"chip"===e?"background-color: transparent;":"primary"===r||"destructive"===r?n?"background-color: rgba(255,255,255,0.3);":`background-color: ${t.COLORS.background.inactive};`:"secondary"===r?n?"border: 1px solid rgba(255, 255, 255, 0.5);":`border: 1px solid ${t.COLORS.stroke.primary};`:"",exports.generateInverseHoverBackground=(r,e)=>e?"":"primary"===r?`background-color: ${t.COLORS.stroke.warning.lightAlt};`:"background-color: rgba(255, 255, 255, 0.1)",exports.getBackgroundColor=(r,e,n,o,a)=>{if("special"===r)return t.COLORS.background.brandVeryLight;if("secondaryGray"===r)return"transparent";if("chip"===e)return"text"===r?"transparent":o?t.COLORS.surface.hovered:t.COLORS.surface.subdued;switch(r){case"primary":return a||(n?t.COLORS.background.warning.vibrant:t.COLORS.background.inverseLight);case"destructive":return t.COLORS.background.negative.vibrant;default:return"transparent"}},exports.getBorder=(r,n,o,a,i)=>"text"==n?"border: none;":"special"===n?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"secondaryGray"===n?`border: 1px solid ${t.COLORS.stroke.primary};`:"chip"===o?`border: ${"2.0"===r?.5:1}px solid ${t.COLORS.stroke.primary};`:a?"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${e(n,a,i)};`:"border: none;":"secondary"===n?`border: ${"2.0"===r?.5:1}px solid ${e(n,!1,i)};`:"border: none;",exports.getBorderColor=e,exports.getButtonIconColor=(r,e,n,o,a,i)=>"chip"===r?o?t.COLORS.content.inactive:i?t.COLORS.content.primary:t.COLORS.content.secondary:a?"transparent":"special"===e?o?t.COLORS.content.inactive:t.COLORS.background.inverseLight:"secondaryGray"===e?o?t.COLORS.content.inactive:t.COLORS.content.secondary:"primary"===e||"destructive"===e?n?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primary:o?t.COLORS.content.inactive:t.COLORS.content.primaryInverse:"secondary"===e||"tertiary"===e?n?o?"rgba(255, 255, 255, 0.5)":t.COLORS.content.primaryInverse:o?t.COLORS.content.inactive:t.COLORS.content.brand:"tertiaryGray"===e||e.startsWith("dash")?o?t.COLORS.content.inactive:t.COLORS.content.secondary:void 0,exports.getClickEffect=(r,e,n)=>"text"===r?`background-color: ${t.COLORS.background.brandLight};\n\t\t\ttext-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`:"special"===r?`background-color: ${t.COLORS.background.brandLight}; border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"secondaryGray"===r?`background-color: ${t.COLORS.surface.hovered}; border: 1px solid ${t.COLORS.stroke.primary};`:"chip"===e?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};\n\t\tbackground-color: ${t.COLORS.background.brandLight};`:"primary"===r||"destructive"===r?n?`background-color: ${t.COLORS.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")?n?`background-color: ${t.COLORS.background.inverseLight}  !important;`:`background-color: ${t.COLORS.background.brandLight};`:void 0,exports.getColor=(r,e,n,o)=>{if("special"===r)return t.COLORS.background.inverseLight;if("secondaryGray"===r)return t.COLORS.content.secondary;if("chip"===e)return"text"===r?n?t.COLORS.content.inactive:t.COLORS.content.brand:o?t.COLORS.content.primary:t.COLORS.content.secondary;switch(r){case"primary":return n?t.COLORS.content.primary:t.COLORS.content.primaryInverse;case"tertiaryGray":case"dashBold":case"dashRegular":return t.COLORS.content.secondary;case"destructive":return t.COLORS.content.primaryInverse;case"ai":return t.COLORS.content.ai;default:return n?t.COLORS.content.primaryInverse:t.COLORS.stroke.brand}},exports.getDashedBorderStyling=function(t,r){let o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e(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${o},\n\t\t\t${o}\n\t\t\t\t${n(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${o},\n\t\t\t${o}\n\t\t\t\t${n(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${o},\n\t\t\t${o}\n\t\t\t\t${n(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${o},\n\t\t\t${o}\n\t\t\t\t${n(r)}\n\t\t);\n\t}\n\t`},exports.getDisabledTextColor=r=>r?"rgba(255, 255, 255, 0.5)":t.COLORS.content.inactive,exports.getHoverButtonBackground=(r,e)=>"ai"===r?`background: ${t.COLORS.surface.aiLight};`:"text"===r?"background-color:transparent;":"special"===r||"secondaryGray"===r||e||"primary"===r?"":"background-color: #000000;\n\t\t\t\topacity: 0.03;",exports.getHoverButtonBackgroundCustom=(t,r)=>{const e=parseInt(t.replace("#",""),16),n=Math.round(2.55*r),o=(e>>16)-n,a=(e>>8&255)-n,i=(255&e)-n;return`#${(16777216+(Math.max(o,0)<<16)+(Math.max(a,0)<<8)+Math.max(i,0)).toString(16).slice(1)}`},exports.getHoverButtonTextDecorationStyle=(r,e)=>e?"":`text-decoration-line: underline;\n\t\t\ttext-decoration-color: ${t.COLORS.content.brand};`,exports.getLinearGradientValue=n,exports.getLoadingBackground=(r,e,n,a)=>"special"===r?`background-color: ${t.COLORS.background.brandVeryLight};`:"secondaryGray"===r?`background-color: ${t.COLORS.surface.subdued};`:"chip"===e?`background-color: ${t.COLORS.background.base};`:"primary"===r?a?`background-color: ${o(a,50)};`:`background-color: ${n?t.COLORS.background.warning.vibrant:t.COLORS.background.brandLight};`:"destructive"===r?`background-color: ${t.COLORS.background.negative.light};`:"background-color: transparent;",exports.getLoadingBorder=(r,e,n)=>"special"===r?`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"secondaryGray"===r?`border: 1px solid ${t.COLORS.stroke.primary};`:"chip"===e?"border: none;":"secondary"===r?n?`border: 1px solid ${t.COLORS.content.secondary};`:`border: 1px solid ${t.COLORS.stroke.brandLightAlt};`:"",exports.getLoadingButtonBackgroundCustom=o,exports.getPadding=(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"}};

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

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

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

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: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"),r=require("react-popper"),n=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:b,tooltipDirection:j,showTooltipArrow:w,isChildLoading:g,forceOpen:h}=d,O=e.__rest(d,["children","onDropdownVisbilityChange","version","tooltipContent","tooltipDirection","showTooltipArrow","isChildLoading","forceOpen"]);const f=p,[D,x]=t.useState(!1),[S,C]=t.useState(!1),[y,m]=t.useState(null),[q,R]=t.useState(null),E=t.useRef(null),{styles:L,attributes:_}=r.usePopper(y,q,{placement:O.placement,strategy:O.strategy}),M=e=>{var o,t;"2.0"===v&&O.isMultiSelect&&e&&(null===(o=O.onSelect)||void 0===o||o.call(O,[...e])),x(!1),null===(t=null==O?void 0:O.onClose)||void 0===t||t.call(O)};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||S?i.COLORS.surface.hovered:i.COLORS.surface.standard,transition:"background-color 0.3s ease",borderRadius:4}),ref:m,onMouseEnter:"3.0"===v?()=>C(!0):void 0,onMouseLeave:"3.0"===v?()=>C(!1):void 0},{children:[o.jsx(l.OverLapAbs,Object.assign({ref:E,allowEvents:O.allowEvents,disabled:O.disabled,onClick:e=>{var o;null===(o=O.onDropdownOpen)||void 0===o||o.call(O),D?(x(!1),e.preventDefault()):O.disabled||x(!0)},isChildLoading:g},{children:O.allowEvents?c:null})),O.allowEvents?null:c]})),(D||h)&&o.jsx(l.OpenDropdownContainer,Object.assign({ref:R,style:Object.assign(Object.assign({},L.popper),{zIndex:null!==(e=O.dropdownZIndex)&&void 0!==e?e:3})},_.popper,{"data-test":O["data-test"]},{children:o.jsx(n.DropShadow,Object.assign({level:"z2",position:"down",style:{borderRadius:"3.0"===v?4:8,boxShadow:"0 2px 8px 0 rgba(0, 0, 0, 0.12)"}},{children:o.jsx(a.OpenedDropdown,Object.assign({},O,{onSelect:e=>{var o;"2.0"===v&&O.isMultiSelect||(null===(o=O.onSelect)||void 0===o||o.call(O,e),x(!1))},onClose:M,version:v,headerRef:E,zeroState:null==O?void 0:O.zeroState,isDraggable:O.isDraggable,onOptionsReorder:O.onOptionsReorder}))}))}))]})};return o.jsx(o.Fragment,{children:D||h||void 0===b?T():o.jsx(s.Tooltip,Object.assign({body:b,placement:j,hideArrow:!w},{children:o.jsx("div",Object.assign({"data-test":O["data-test"]},{children:T()}))}))})}));p.displayName="DropdownPopover",exports.DropdownPopover=p;

package/dist/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.js

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

package/dist/cjs/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/cjs/components/dropdown/OpenedDropdown/components/OpennedDropdown.styled.js

@@ -1,21 +1,22 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),r=require("../../../../constants/Theme.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=o(e);const i=t.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),o=require("../../../../constants/Theme.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(e);const i=t.default.div`
 	border-radius: ${e=>"2.0"===e.version?8:4}px;
-	border: ${e=>"2.0"===e.version?0:1}px solid
-		${r.COLORS.stroke.primary};
+	border: ${e=>"2.0"===e.version||"3.0"===e.version?0:1}px
+		solid ${o.COLORS.stroke.primary};
+	box-shadow: ${e=>"3.0"===e.version?"0px 2px 8px 0px rgba(0, 0, 0, 0.12)":"none"};
 	max-height: 480px;
 	overflow: hidden;
 	display: flex;
 	flex-direction: row;
 	position: relative;
 	padding: ${e=>"2.0"===e.version?4:0}px;
-	background-color: ${r.COLORS.surface.standard};
+	background-color: ${o.COLORS.surface.standard};
 `;t.default.div`
 	padding: 14px 16px 14px 18px;
 	flex-direction: row;
 	align-items: center;
 	border-bottom-width: 1px;
 	border-bottom-style: solid;
-	border-bottom-color: ${r.COLORS.stroke.primary};
+	border-bottom-color: ${o.COLORS.stroke.primary};
 	width: 100%;
 	height: 100%;
 `;const d=t.default.div`

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/dropdown/OpenedDropdown/components/menu/MenuItem.js

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../../assets/icons/chevronRight.svg.js"),n=require("react"),r=require("styled-components"),o=require("../../../../checkBox/CheckBox.js"),i=require("../../../../list-item/ListItem.js"),s=require("../../../../tooltips/Tooltip.js"),a=require("../../../../TypographyStyle.js"),l=require("../../../../../constants/Theme.js"),d=require("./FreeFormMenu.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(r);const g=u.default(i.ListItem)`
-	padding: ${e=>"2.0"===e.version?"8px 12px":"14px 16px"} !important;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("../../../../../assets/icons/chevronRight.svg.js"),n=require("react"),r=require("styled-components"),o=require("../../../../checkBox/CheckBox.js"),i=require("../../../../list-item/ListItem.js"),s=require("../../../../tooltips/Tooltip.js"),a=require("../../../../TypographyStyle.js"),l=require("../../../../../constants/Theme.js"),d=require("./FreeFormMenu.styled.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(r);const p=u.default(i.ListItem)`
+	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"};
-`,p=u.default.div`
+`,g=u.default.div`
 	box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
 	border-radius: ${e=>{let{version:t}=e;return"1.0"===t?"0":"8px"}};
 	padding: ${e=>{let{version:t}=e;return"1.0"===t?"0":"4px"}};
@@ -28,16 +28,16 @@
 	border-radius: 50%;
 	background-color: ${l.COLORS.content.inactive};
 	flex-shrink: 0;
-`,j=u.default.div`
+`,v=u.default.div`
 	display: flex;
 	align-content: center;
 	justify-content: center;
 	gap: 8px;
-`,m=u.default.div`
+`,j=u.default.div`
 	margin-right: -4px;
-`,v=u.default.div`
+`,m=u.default.div`
 	display: flex;
 	align-items: center;
 	flex-direction: column;
 	flex: 1;
-`,b=t=>{let{onDragStart:n,onDragEnd:r}=t;return e.jsxs(x,Object.assign({draggable:!0,onDragStart:n,onDragEnd:r},{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}))},f=n.forwardRef(((r,i)=>{let{option:c,isMultiSelect:u,showDescription:x,onSelect:h,last:f,version:D,onDropdownItemClick:C,useDefaultCursor:O,isFocused:y=!1,dataIndex:I=-1,isDraggable:F=!1,onDragStart:E,onDragOver:S,onDrop:T,onDragEnd:k,isDraggedOver:L=!1,showCheckboxForCustomElement:w=!1}=r;var M,q;const[$,A]=n.useState(c.selected),B=(e,t)=>{if(!e.children){R(!e.selected);const n=t?Object.assign(Object.assign({},e),{parent:t}):e;null==C||C(n)}},R=e=>{c.disabled||h(Object.assign(Object.assign({},c),{selected:e}))},U=O?{cursor:"default"}:{};return e.jsx(e.Fragment,{children:e.jsx(s.Tooltip,Object.assign({body:"",tooltipContent:c.children?e.jsx("div",Object.assign({style:{backgroundColor:l.DEFAULT_THEME.colorsV2.surface.standard},ref:i,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},{children:e.jsx(p,Object.assign({version:null!=D?D:"2.0"},{children:c.children.map((t=>{var n;return e.jsx(g,{version:D,style:"1.0"!==D&&(null!==(n=null==c?void 0:c.children)&&void 0!==n?n:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),B(t,c)},listItem:{value:t.value,label:t.label},subText:t.subText,leadingIcon:t.leadingIcon||void 0,customComponent:t.customComponent,trailingIcon:t.trailingIcon||void 0,variant:c.disabled?"inactive":t.selected?"selected":"default"},t.value)}))}))})):e.jsx(e.Fragment,{}),placement:"right-start",hideArrow:!0},{children:e.jsx(g,{version:D,style:f?Object.assign(Object.assign({borderBottom:0},U),L?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},U),L?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),B(c)},onMouseOver:()=>{c.description?x(c.label,c.description):x()},listItem:{value:c.value,label:c.label},subText:c.subText,"data-option-index":I,role:"option",id:`dropdown-option-${I}`,"aria-selected":!!c.selected,onDragOver:F?S:void 0,onDrop:F?T:void 0,leadingIcon:!u||w&&c.customComponent?F?e.jsxs(v,{children:[e.jsx(b,{onDragStart:E,onDragEnd:k}),c.leadingIcon&&e.jsx("div",{children:c.leadingIcon})]}):c.leadingIcon?e.jsx(e.Fragment,{children:c.leadingIcon}):void 0:e.jsxs(j,{children:[F&&e.jsx(b,{onDragStart:E,onDragEnd:k}),e.jsx(o.CheckBox,{size:"2.0"===D?"SMALL":"DEFAULT",isDisabled:null!==(M=c.disabled)&&void 0!==M&&M,isChecked:!!c.selected,onValueChange:R}),e.jsx(m,{children:c.leadingIcon})]}),customComponent:u&&w&&c.customComponent?e.jsxs(j,{children:[F&&e.jsx(b,{onDragStart:E,onDragEnd:k}),e.jsx(o.CheckBox,{size:"2.0"===D?"SMALL":"DEFAULT",isDisabled:null!==(q=c.disabled)&&void 0!==q&&q,isChecked:!!c.selected,onValueChange:R}),c.customComponent]}):c.customComponent,trailingIcon:c.isFreeForm?e.jsx(d.FreeFormContainer,{children:e.jsx(a.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:"Freeform"}))}):c.children?e.jsx(t.default,{width:12,height:12}):c.trailingIcon?e.jsx(e.Fragment,{children:c.trailingIcon}):void 0,variant:c.disabled?"inactive":y||c.selected||!u&&$?"selected":"default"})}))})}));exports.MenuItem=f;
+`,b=t=>{let{onDragStart:n,onDragEnd:r}=t;return e.jsxs(x,Object.assign({draggable:!0,onDragStart:n,onDragEnd:r},{children:[e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{}),e.jsx(h,{})]}))},f=n.forwardRef(((r,i)=>{let{option:c,isMultiSelect:u,showDescription:x,onSelect:h,last:f,version:D,onDropdownItemClick:C,useDefaultCursor:O,isFocused:y=!1,dataIndex:I=-1,isDraggable:F=!1,onDragStart:E,onDragOver:S,onDrop:T,onDragEnd:k,isDraggedOver:L=!1,showCheckboxForCustomElement:w=!1}=r;var M,q;const[$,A]=n.useState(c.selected),B=(e,t)=>{if(!e.children){R(!e.selected);const n=t?Object.assign(Object.assign({},e),{parent:t}):e;null==C||C(n)}},R=e=>{c.disabled||h(Object.assign(Object.assign({},c),{selected:e}))},U=O?{cursor:"default"}:{};return e.jsx(e.Fragment,{children:e.jsx(s.Tooltip,Object.assign({body:"",tooltipContent:c.children?e.jsx("div",Object.assign({style:{backgroundColor:l.DEFAULT_THEME.colorsV2.surface.standard},ref:i,onMouseEnter:()=>A(!0),onMouseLeave:()=>A(!1)},{children:e.jsx(g,Object.assign({version:null!=D?D:"2.0"},{children:c.children.map((t=>{var n;return e.jsx(p,{version:D,style:"1.0"!==D&&(null!==(n=null==c?void 0:c.children)&&void 0!==n?n:[]).length-1?{borderBottom:0}:{},onClick:e=>{e.preventDefault(),B(t,c)},listItem:{value:t.value,label:t.label},subText:t.subText,leadingIcon:t.leadingIcon||void 0,customComponent:t.customComponent,trailingIcon:t.trailingIcon||void 0,variant:c.disabled?"inactive":t.selected?"selected":"default"},t.value)}))}))})):e.jsx(e.Fragment,{}),placement:"right-start",hideArrow:!0},{children:e.jsx(p,{version:D,style:f?Object.assign(Object.assign({borderBottom:0},U),L?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}):Object.assign(Object.assign({},U),L?{borderTop:`2px solid ${l.COLORS.content.brand}`,opacity:.5}:{}),onClick:e=>{e.preventDefault(),B(c)},onMouseOver:()=>{c.description?x(c.label,c.description):x()},listItem:{value:c.value,label:c.label},subText:c.subText,"data-option-index":I,role:"option",id:`dropdown-option-${I}`,"aria-selected":!!c.selected,onDragOver:F?S:void 0,onDrop:F?T:void 0,leadingIcon:!u||w&&c.customComponent?F?e.jsxs(m,{children:[e.jsx(b,{onDragStart:E,onDragEnd:k}),c.leadingIcon&&e.jsx("div",{children:c.leadingIcon})]}):c.leadingIcon?e.jsx(e.Fragment,{children:c.leadingIcon}):void 0:e.jsxs(v,{children:[F&&e.jsx(b,{onDragStart:E,onDragEnd:k}),e.jsx(o.CheckBox,{size:"2.0"===D?"SMALL":"DEFAULT",isDisabled:null!==(M=c.disabled)&&void 0!==M&&M,isChecked:!!c.selected,onValueChange:R}),e.jsx(j,{children:c.leadingIcon})]}),customComponent:u&&w&&c.customComponent?e.jsxs(v,{children:[F&&e.jsx(b,{onDragStart:E,onDragEnd:k}),e.jsx(o.CheckBox,{size:"2.0"===D?"SMALL":"DEFAULT",isDisabled:null!==(q=c.disabled)&&void 0!==q&&q,isChecked:!!c.selected,onValueChange:R}),c.customComponent]}):c.customComponent,trailingIcon:c.isFreeForm?e.jsx(d.FreeFormContainer,{children:e.jsx(a.BodyCaption,Object.assign({style:{color:l.COLORS.content.secondary}},{children:"Freeform"}))}):c.children?e.jsx(t.default,{width:12,height:12}):c.trailingIcon?e.jsx(e.Fragment,{children:c.trailingIcon}):void 0,variant:c.disabled?"inactive":y||c.selected||!u&&$?"selected":"default"})}))})}));exports.MenuItem=f;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchBox.js

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

package/dist/cjs/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/cjs/components/dropdown/OpenedDropdown/components/searchbox/SearchZeroState.js

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

package/dist/cjs/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/cjs/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/cjs/components/dropdown-button/DropdownButton.js

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

package/dist/cjs/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/cjs/components/dropdown-button/DropdownButton.style.js

@@ -1,14 +1,18 @@
-"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 i=r(e);const n=i.default.div`
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("styled-components"),e=require("../../constants/Theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n=r(t);const i=n.default.div`
 	display: flex;
 	flex-direction: row;
 	width: max-content;
 	position: relative;
 	align-items: stretch;
+	${t=>{var r,n,i;return t.isIconButton&&`\n\t\tborder-radius: 4px;\n\t\tbackground: ${n=null!==(r=t.iconButtonType)&&void 0!==r?r:"primary",i=t.disabled,i?e.COLORS.background.inactive:"primary"===n?e.COLORS.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.COLORS.stroke.primary:"secondary"===t.type?e.COLORS.stroke.brand:"transparent"};`:""}\n\t`}
 	.dd-button-divider {
-		width: ${e=>["primary","destructive"].includes(e.type)?"1px":"0px"};
-		background-color: ${e=>{return r=e.type,(null==e?void 0:e.disabled)?t.COLORS.content.inactive:"primary"===r?"#CDA2FC":t.COLORS.content.primaryInverse;var r}};
+		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.COLORS.stroke.primary:(r=t.type,(null==t?void 0:t.disabled)?e.COLORS.content.inactive:"primary"===r?"#CDA2FC":e.COLORS.content.primaryInverse);var r}};
 	}
-`,o=i.default.div`
+`,o=n.default.div`
 	position: absolute;
 	inset: 0;
 	display: flex;
@@ -17,6 +21,6 @@
 	justify-content: center;
 	width: 100%;
 	border-radius: 4px;
-	background: ${t.BASE_COLORS.brand[50]};
+	background: ${t=>(t=>{switch(t){case"destructive":return e.COLORS.background.negative.light;case"secondaryGray":return e.COLORS.surface.subdued;default:return e.COLORS.background.brandLight}})(t.type)};
 	z-index: 3;
-`;exports.DropdownButtonStyle=n,exports.LoaderContainer=o;
+`;exports.DropdownButtonStyle=i,exports.LoaderContainer=o;

package/dist/cjs/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/cjs/components/dual-icon-button/DualIconButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../constants/Theme.js"),n=require("./DualIconButton.styled.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(t);const r=t.forwardRef(((t,o)=>{let{id:r,LeftIcon:c,RightIcon:s,onLeftClick:a,onRightClick:d,disabled:u,leftIconColor:f,rightIconColor:h,style:j}=t;const b=u?i.COLORS.content.inactive:i.COLORS.content.primaryInverse;return e.jsxs(n.Container,Object.assign({id:r,ref:o,disabled:u,style:j},{children:[e.jsx(n.IconHalf,Object.assign({disabled:u,onClick:u?void 0:a},{children:l.default.createElement(c,{height:16,width:16,color:f||b,style:{display:"block"}})})),e.jsx(n.Divider,{}),e.jsx(n.IconHalf,Object.assign({disabled:u,onClick:u?void 0:d},{children:l.default.createElement(s,{height:16,width:16,color:h||b,style:{display:"block"}})}))]}))}));r.displayName="DualIconButton",exports.DualIconButton=r;

package/dist/cjs/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/cjs/components/dual-icon-button/DualIconButton.styled.js

@@ -0,0 +1,25 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("styled-components"),t=require("../../constants/Theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=n(e);const i=r.default.div`
+	display: inline-flex;
+	align-items: center;
+	border-radius: 4px;
+	overflow: hidden;
+	background: ${e=>e.disabled?t.COLORS.background.inactive:t.COLORS.background.inverseLight};
+`,o=r.default.button`
+	all: unset;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	padding: 4px;
+	box-sizing: border-box;
+	cursor: ${e=>e.disabled?"not-allowed":"pointer"};
+	background: transparent;
+
+	${e=>e.disabled?"":`\n\t\t:hover {\n\t\t\tbackground-color: ${t.COLORS.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`}
+`,d=r.default.div`
+	width: 1px;
+	height: 12px;
+	background: rgba(255, 255, 255, 0.3);
+	flex-shrink: 0;
+`;exports.Container=i,exports.Divider=d,exports.IconHalf=o;

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

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

package/dist/cjs/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/cjs/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/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"),i=require("react"),o=require("../tooltips/Tooltip.js"),l=require("./IconButton.styled.js"),s=require("./theme.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=n(i);const r=i.forwardRef(((i,n)=>{var{id:r,iconButtonType:c="default",size:a="default",Icon:u,height:b,width:y,bordered:p,disabled:j,isSelected:g,style:h,svgStyle:f,iconColor:v,iconPadding:x,disabledTooltip:B}=i,I=e.__rest(i,["id","iconButtonType","size","Icon","height","width","bordered","disabled","isSelected","style","svgStyle","iconColor","iconPadding","disabledTooltip"]);const T="xs"===a?16:20,q=null!=b?b:T,_=null!=y?y:T,w=s.getIconColor(c,j,g),O=t.jsx(l.IconButton,Object.assign({id:r,ref:n,style:h,iconButtonType:c,bordered:p,disabled:j,isSelected:g,iconPadding:x,size:a},I,{children:d.default.createElement(u,{height:q,width:_,color:v||w,style:Object.assign({display:"block"},null!=f?f:{})})}));return j&&B?t.jsx(o.Tooltip,Object.assign({body:B},{children:t.jsx("span",Object.assign({style:{display:"inline-block",cursor:"not-allowed"}},{children:O}))})):O}));r.displayName="IconButton",exports.IconButton=r;

package/dist/cjs/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/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"),o=require("./theme.js");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const e=r(t).default.button`
+	${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.COLORS.stroke.primary};`:""}\n\t${"primary"===t.iconButtonType?`\n\t\t\t\tbackground: ${o.generateBackgroundColor("primary")};\n\t\t\t\t${t.isSelected?"":`:hover { background-color: ${n.COLORS.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.generateBackgroundColor(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.COLORS.background.inactive};\n\t\t\t\t\t:hover { background-color: ${n.COLORS.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`}
+`;exports.IconButton=e;