@bikdotai/bik-component-library 0.0.63 → 0.0.64-0.beta.help-attr-2

package/dist/esm/components/discount-modal/DynamicCoupon/DynamicCoupon.js

@@ -0,0 +1 @@
+import{__rest as e}from"../../../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as o}from"react/jsx-runtime";import n from"../../../assets/icons/info.svg.js";import{Alert as l}from"../../alerts/Alert.js";import{ALERT_TYPES as s,CONTENT_POSITION as r}from"../../alerts/AlertHelper.js";import{Button as a}from"../../button/Button.js";import{CheckBox as d}from"../../checkBox/CheckBox.js";import"react";import{DISCOUNT_APPLIES_TO as c,OFFER_APPLIES_TO as u,DISCOUNT_TYPES as p,COUPON_EXPIRATION as m,DISCOUNT_VALUE_TYPES as v,DISCOUNT_TARGET_TYPES as C,DISCOUNT_TARGET_SELECTION as E}from"../type.js";import"../../dropdown/DropdownPopover/index.js";import{Dropdown as b}from"../../dropdown/Dropdown.js";import"../../dropdown/ChipDropdown.js";import"../../zeroState/ZeroState.js";import{BodySecondary as D,TitleRegular as g,TitleSmall as T}from"../../TypographyStyle.js";import{DEFAULT_THEME as h}from"../../../constants/Theme.js";import"../../dropdown/OpenedDropdown/components/description/Description.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"../../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../../icon-button/IconButton.js";import{Input as y}from"../../input/Input.js";import P from"../../../assets/icons/cross.svg.js";import"../../dropdown/MenuItem/MenuItem.js";import"../../modals/styledModal.js";import"../../../node_modules/lodash.debounce/index.js";import"../../bik-layout/CommonStyles.js";import"../../product-picker/ProductPicker.styled.js";import"../../../utils/DateUtils.js";import"../../tag/Tag.js";import"../../tooltips/Tooltip.js";import"../../product-picker-v2/modal.js";import"../../variable-picker-v3/model.js";import"../../modals/modal.styled.js";import O from"../../../assets/icons/plus.svg.js";import"../../accordion/Accordion.style.js";import"../../accordion/AccordionArrow.js";import"../../switch/Switch.js";import"../../variable-picker-v3/NoResult.js";import"../../variable-picker-v3/styles.js";import"lodash";import{DynamicCouponContainer as I}from"../DiscountModal.styled.js";import{CouponExpiration as j}from"../CouponExpiration/CouponExpiration.js";import{RadioButton as V}from"../../radioButton/RadioButton.js";import S from"../../../assets/icons/cubeIcon.svg.js";import f from"../../../assets/icons/delete.svg.js";import x from"../../../assets/icons/edit.svg.js";import{DiscountOptionsContainer as R,DiscountDetailsOption as _,AddProductButtonsContainer as A,ProductCollectionCard as N,CubeIconContainer as w,IconContainer as L,ProductVariableCard as F}from"./DynamicCoupon.styled.js";import q from"./MinimumRequirementComponent.js";import k from"./ZeroState.js";var U;!function(e){e.ENTITLED="entitled",e.PREREQUISITE="prerequisite"}(U||(U={}));const B=B=>{var M,G,Q,Y,X,$,W,z;const Z=[{selected:B.discountCouponAppliesTo===c.ENTIRE_ORDER,label:"Entire Order",value:c.ENTIRE_ORDER},{selected:B.discountCouponAppliesTo===c.SPECIFIC_PRODUCTS,label:"Specific Product",value:c.SPECIFIC_PRODUCTS},{selected:B.discountCouponAppliesTo===c.SPECIFIC_COLLECTIONS,label:"Specific Collections",value:c.SPECIFIC_COLLECTIONS}],H=[{selected:B.offerAppliesToBuy===u.SPECIFIC_PRODUCTS,label:"Specific Product",value:u.SPECIFIC_PRODUCTS},{selected:B.offerAppliesToBuy===u.SPECIFIC_COLLECTIONS,label:"Specific Collections",value:u.SPECIFIC_COLLECTIONS}],J=[{selected:B.offerAppliesToGet===u.SPECIFIC_PRODUCTS,label:"Specific Product",value:u.SPECIFIC_PRODUCTS},{selected:B.offerAppliesToGet===u.SPECIFIC_COLLECTIONS,label:"Specific Collections",value:u.SPECIFIC_COLLECTIONS}],K=(e,d,u)=>{var p,m,v,C,E,b,g,y,I,j,V,R;let _=[],q=[],k={},M={};B.useNewPicker?(k=d===U.ENTITLED?B.entitledProducts:B.prerequisiteProducts,M=null!==(p=d===U.ENTITLED?B.entitledCollections:B.prerequisiteCollections)&&void 0!==p?p:[],(null==k?void 0:k.isCustom)&&delete k.isCustom,(null==M?void 0:M.isCustom)&&delete M.isCustom,Object.values(k).forEach((e=>{Object.keys(e.products).forEach((i=>{_.push({id:i,name:e.products[i].name,image:e.products[i].image})}))})),Object.keys(M).forEach((e=>{"isCustom"!==e&&q.push({id:e,name:M[e].name,image:M[e].image})}))):(_=d===U.ENTITLED?B.entitledProducts:B.prerequisiteProducts,q=null!==(m=d===U.ENTITLED?B.entitledCollections:B.prerequisiteCollections)&&void 0!==m?m:[]);const G=[null===(v=B.dynamicDiscountValidationError)||void 0===v?void 0:v.inValidProductSelection,null===(C=B.dynamicDiscountValidationError)||void 0===C?void 0:C.inValidProductVariableSelection,null===(E=B.dynamicDiscountValidationError)||void 0===E?void 0:E.inValidCollectionSelection],Q=[null===(b=B.dynamicDiscountValidationError)||void 0===b?void 0:b.inValidBuyXCollectionSelection,null===(g=B.dynamicDiscountValidationError)||void 0===g?void 0:g.inValidBuyXProductSelection,null===(y=B.dynamicDiscountValidationError)||void 0===y?void 0:y.inValidBuyXProductVariableSelection],Y=[null===(I=B.dynamicDiscountValidationError)||void 0===I?void 0:I.inValidGetYCollectionSelection,null===(j=B.dynamicDiscountValidationError)||void 0===j?void 0:j.inValidGetYProductSelection,null===(V=B.dynamicDiscountValidationError)||void 0===V?void 0:V.inValidGetYProductVariableSelection];let X=!1;return"couponAppliesTo"===u&&(X=G.some(Boolean)),"buyX"===u&&(X=Q.some(Boolean)),"getY"===u&&(X=Y.some(Boolean)),i(o,{children:[i("div",Object.assign({style:{display:"flex",gap:18}},{children:[e===c.SPECIFIC_PRODUCTS&&0===_.length&&(d===U.ENTITLED&&!B.entitledProductVariable||d===U.PREREQUISITE&&!B.preRequisiteProductVariable)&&!(null==q?void 0:q.length)&&i(A,{children:[t("div",Object.assign({style:{width:B.isProductVariableSupported?"284px":"300px",display:"flex"}},{children:t(a,{buttonText:"Add Product(s)",buttonType:"dashRegular",LeadingIcon:O,matchParentWidth:!0,onClick:()=>{B.setIsProductPickerOpen(d)},error:X})})),B.isProductVariableSupported&&B.productVariableList&&i(o,{children:[t(D,Object.assign({color:h.colorsV2.content.placeholder},{children:"OR"})),t(a,{buttonText:"Add Product(s) Variable",buttonType:"dashRegular",LeadingIcon:O,matchParentWidth:!0,onClick:()=>{B.setIsProductVariablePickerOpen(d)},error:X})]})]}),e===c.SPECIFIC_COLLECTIONS&&0===q.length&&!(null==_?void 0:_.length)&&t("div",Object.assign({style:{width:"300px",display:"flex"}},{children:t(a,{buttonText:"Add collection(s)",buttonType:"dashRegular",LeadingIcon:O,matchParentWidth:!0,onClick:()=>{B.setIsCollectionPickerOpen(d)},style:{marginTop:"16px"},error:X})}))]})),X&&t("div",Object.assign({style:{margin:"8px 0 0"}},{children:t(l,{type:s.NEGATIVE,text:"Required Field",contentPosition:r.START,icon:()=>t(n,{width:16,height:16,color:h.colorsV2.content.negative})})})),_.length||q.length?i("div",{children:[t(D,Object.assign({style:{margin:"8px 0"}},{children:e===c.SPECIFIC_COLLECTIONS?"Collection(s)":"Product(s)"})),i(N,{children:[t(w,{children:t(S,{width:20,height:20,color:h.colorsV2.content.secondary})}),i(T,{children:[e===c.SPECIFIC_PRODUCTS?_.length:q.length," ",e===c.SPECIFIC_PRODUCTS?"Product(s)":"Collection(s)"," ","added"]}),i("div",Object.assign({style:{display:"flex",gap:4}},{children:[t(L,Object.assign({onClick:()=>{e===c.SPECIFIC_PRODUCTS?B.setIsProductPickerOpen(d):B.setIsCollectionPickerOpen(d)}},{children:t(x,{width:24,height:24,color:h.colorsV2.content.placeholder})})),t(L,Object.assign({onClick:()=>{e===c.SPECIFIC_PRODUCTS?d===U.ENTITLED?B.setEntitledProducts([]):B.setPrerequisiteProducts([]):d===U.ENTITLED?B.setEntitledCollections([]):B.setPrerequisiteCollections([])}},{children:t(f,{width:24,height:24,color:h.colorsV2.content.placeholder})}))]}))]})]}):d===U.ENTITLED&&B.entitledProductVariable?i("div",{children:[t(D,Object.assign({style:{margin:"16px 0 8px"}},{children:"Product Variable"})),i(F,{children:[t(T,{children:B.entitledProductVariable.displayName}),t("div",Object.assign({style:{display:"flex",gap:4}},{children:t(L,Object.assign({onClick:()=>{B.setEntitledProductVariable(void 0)}},{children:t(P,{width:24,height:24,color:h.colorsV2.content.primary})}))}))]})]}):d===U.PREREQUISITE&&(null===(R=B.preRequisiteProductVariable)||void 0===R?void 0:R.displayName)?i("div",{children:[t(D,Object.assign({style:{margin:"16px 0 8px"}},{children:"Product Variable"})),i(F,{children:[t(T,{children:B.preRequisiteProductVariable.displayName}),t("div",Object.assign({style:{display:"flex",gap:4}},{children:t(L,Object.assign({onClick:()=>{B.setPreRequisiteProductVariable(void 0)}},{children:t(P,{width:24,height:24,color:h.colorsV2.content.primary})}))}))]})]}):t(o,{children:" "})]})},ee=(e,o)=>{var n,l,s,r,a,d,p,m,v,C;let E=[],g=[],h={},P={};B.useNewPicker?(h=e===U.ENTITLED?B.entitledProducts:B.prerequisiteProducts,P=null!==(n=e===U.ENTITLED?B.entitledCollections:B.prerequisiteCollections)&&void 0!==n?n:[],(null==h?void 0:h.isCustom)&&delete h.isCustom,(null==P?void 0:P.isCustom)&&delete P.isCustom,Object.values(h).forEach((e=>{Object.keys(e.products).forEach((i=>{E.push({id:i,name:e.products[i].name,image:e.products[i].image})}))})),Object.keys(P).forEach((e=>{"isCustom"!==e&&g.push({id:e,name:P[e].name,image:P[e].image})}))):(E=e===U.ENTITLED?B.entitledProducts:B.prerequisiteProducts,g=null!==(l=e===U.ENTITLED?B.entitledCollections:B.prerequisiteCollections)&&void 0!==l?l:[]);const O=e===U.PREREQUISITE?B.offerAppliesToBuy:B.offerAppliesToGet,I=e===U.PREREQUISITE?U.PREREQUISITE:U.ENTITLED,j=O===u.SPECIFIC_PRODUCTS?c.SPECIFIC_PRODUCTS:c.SPECIFIC_COLLECTIONS;return i("div",{children:[t(T,Object.assign({style:{marginBottom:16}},{children:e===U.PREREQUISITE?"Customer buys":"Customer gets"})),i("div",Object.assign({style:{display:"flex"}},{children:[!o&&t("div",{children:i("div",Object.assign({className:"input__rows"},{children:[t("div",Object.assign({className:"input__wrapper"},{children:t(y,{value:e===U.ENTITLED?null!==(r=null===(s=B.discountData.entitledQuantity)||void 0===s?void 0:s.toString())&&void 0!==r?r:"":null!==(d=null===(a=B.discountData.prerequisiteQuantity)||void 0===a?void 0:a.toString())&&void 0!==d?d:"",type:"number",onChangeText:i=>{e===U.ENTITLED?B.setDiscountData(Object.assign(Object.assign({},B.discountData),{entitledQuantity:parseInt(i)})):B.setDiscountData(Object.assign(Object.assign({},B.discountData),{prerequisiteQuantity:parseInt(i)}))},labelText:"Quantity of products",placeholder:"Eg. 2",width:"300px",errorMessage:e===U.PREREQUISITE&&(null===(p=B.dynamicDiscountValidationError)||void 0===p?void 0:p.inValidBuyXValue)||e===U.ENTITLED&&(null===(m=B.dynamicDiscountValidationError)||void 0===m?void 0:m.inValidGetYValue)?"Required Field":"",state:e===U.PREREQUISITE&&(null===(v=B.dynamicDiscountValidationError)||void 0===v?void 0:v.inValidBuyXValue)||e===U.ENTITLED&&(null===(C=B.dynamicDiscountValidationError)||void 0===C?void 0:C.inValidGetYValue)?"invalid":"none"})})),t("div",{className:"input__wrapper"})]}))}),i("div",{children:[t(D,Object.assign({style:{marginBottom:8}},{children:"Any items from"})),e===U.PREREQUISITE&&t(b,{width:"244px",options:H,placement:"bottom-start",onSelect:e=>{var i,t,o;B.setOfferAppliesToBuy(e.value),B.setPrerequisiteProducts([]),B.setPrerequisiteCollections([]),B.setPreRequisiteProductVariable(void 0),B.setDynamicDiscountValidationError((e=>Object.assign(Object.assign({},e),{inValidBuyXCollectionSelection:!1,inValidBuyXProductSelection:!1,inValidBuyXProductVariableSelection:!1}))),B.setDiscountData(Object.assign(Object.assign({},B.discountData),{prerequisiteCollectionIds:[],prerequisiteProductIds:[],collectionsConf:{entitledCollections:null===(i=B.discountData.collectionsConf)||void 0===i?void 0:i.entitledCollections,prerequisiteCollections:{}},productsConf:{entitledProducts:null===(t=B.discountData.productsConf)||void 0===t?void 0:t.entitledProducts,prerequisiteProducts:{}},productVariableConf:{entitledProductVariable:null===(o=B.discountData.productVariableConf)||void 0===o?void 0:o.entitledProductVariable,prerequisiteProductVariable:{}}}))}}),e===U.ENTITLED&&t(b,{width:"244px",options:J,placement:"bottom-start",onSelect:e=>{var i,t,o;B.setOfferAppliesToGet(e.value),B.setEntitledProducts([]),B.setEntitledCollections([]),B.setEntitledProductVariable(void 0),B.setDynamicDiscountValidationError((e=>Object.assign(Object.assign({},e),{inValidGetYCollectionSelection:!1,inValidGetYProductSelection:!1,inValidGetYProductVariableSelection:!1}))),B.setDiscountData(Object.assign(Object.assign({},B.discountData),{entitledCollectionIds:[],entitledProductIds:[],collectionsConf:{entitledCollections:{},prerequisiteCollections:null===(i=B.discountData.collectionsConf)||void 0===i?void 0:i.prerequisiteCollections},productsConf:{entitledProducts:{},prerequisiteProducts:null===(t=B.discountData.productsConf)||void 0===t?void 0:t.prerequisiteProducts},productVariableConf:{entitledProductVariable:{},prerequisiteProductVariable:null===(o=B.discountData.productVariableConf)||void 0===o?void 0:o.prerequisiteProductVariable}}))}})]})]})),K(j,I,e===U.PREREQUISITE?"buyX":"getY")]})};return i(I,{children:[i("div",{children:[i("div",Object.assign({style:{display:"flex",gap:16}},{children:[t("div",Object.assign({className:"input__wrapper"},{children:t(y,{value:null!==(M=B.discountData.title)&&void 0!==M?M:"",onChangeText:e=>{var i;B.setDiscountData(Object.assign(Object.assign({},B.discountData),{title:null!==(i=null==e?void 0:e.trim())&&void 0!==i?i:""}))},maxCharLimit:30,labelText:"Discount Coupon Title",placeholder:`Eg. “Flat ${null!==(G=B.currency)&&void 0!==G?G:""} 15 Off”`,hintText:"Will be same for everyone. Can’t be changed later",width:"300px",isRequired:!0,errorMessage:(null===(Q=B.dynamicDiscountValidationError)||void 0===Q?void 0:Q.invalidCouponTitle)?"Required Field":"",state:(null===(Y=B.dynamicDiscountValidationError)||void 0===Y?void 0:Y.invalidCouponTitle)?"invalid":"none"})})),!B.hideProbability&&t(y,{value:null!==($=null===(X=B.discountData.probability)||void 0===X?void 0:X.toString())&&void 0!==$?$:"",type:"number",onChangeText:e=>{B.setDiscountData(Object.assign(Object.assign({},B.discountData),{probability:e.startsWith(".")?parseFloat(parseFloat(`0${e}`).toFixed(2)):parseFloat(parseFloat(e).toFixed(2))}))},labelText:"Probability of getting coupon ",hintText:"Enter a decimal value between 0-1",placeholder:"Eg. 0.5",maxCharLimit:4,width:"300px",isRequired:!0,errorMessage:(null===(W=B.dynamicDiscountValidationError)||void 0===W?void 0:W.inValidProbability)?"Required Field":"",state:(null===(z=B.dynamicDiscountValidationError)||void 0===z?void 0:z.inValidProbability)?"invalid":"none"})]})),t("div",{style:{height:"1px",width:"100%",background:h.colorsV2.stroke.primary,margin:"24px 0 8px"}})]}),B.allowStaticCoupon&&t((()=>i("div",{children:[t(g,{children:"Discount Details"}),t(R,{children:B.discountDetailsOptions.map((t=>{return i(_,Object.assign({selected:B.selectedDiscountDetails.id===t.id,onClick:()=>(i=>{if(B.selectedDiscountDetails.id!==i.id)if(B.resetValidationErrors(),B.setValidationErrorMessage(""),B.setDiscountCouponAppliesTo(c.ENTIRE_ORDER),B.setSelectedDiscountDetails(i),B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:void 0})),B.setPreRequisiteProductVariable(void 0),B.setEntitledProductVariable(void 0),["percentage","amount"].includes(i.value)){B.onChangeCouponType({label:"Amount off on order",selected:!0,value:p.AMOUNT_OFF_ORDER});const t=Object.assign(Object.assign({},B.discountData),{valueType:"percentage"===i.value?v.PERCENTAGE:v.FIXED_AMOUNT,value:void 0,targetType:C.LINE_ITEM,targetSelection:E.ALL,entitledCollectionIds:[],entitledProductIds:[],prerequisiteCollectionIds:[],prerequisiteProductIds:[],collectionsConf:{entitledCollections:{},prerequisiteCollections:{}},productsConf:{entitledProducts:{},prerequisiteProducts:{}},productVariableConf:{entitledProductVariable:{},prerequisiteProductVariable:{}}}),o=e(t,["entitledQuantity","prerequisiteQuantity"]);B.setDiscountData(o)}else B.onChangeCouponType({label:i.label,selected:!0,value:i.value})})(t)},{children:[t.icon((o=t.id,B.selectedDiscountDetails.id===o?h.colorsV2.stroke.brand:h.colorsV2.text.secondary)),t.label]}),t.id);var o}))})]})),{}),(B.selectedCouponType===p.AMOUNT_OFF_ORDER||B.selectedCouponType===p.AMOUNT_OFF_PRODUCTS)&&(()=>{var e,n,l,s,r,a;return i(o,{children:[t("div",Object.assign({className:"input__rows"},{children:t("div",Object.assign({className:"input__wrapper"},{children:t(y,{value:null!==(l=null===(n=null===(e=B.discountData)||void 0===e?void 0:e.value)||void 0===n?void 0:n.toString())&&void 0!==l?l:"",labelText:"Discount amount",type:"number",width:"300px",onChangeText:e=>{B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:parseInt(e)}))},placeholder:"15",prefixText:B.discountData.valueType===v.FIXED_AMOUNT?null!==(s=B.currency)&&void 0!==s?s:"":void 0,suffixText:B.discountData.valueType===v.PERCENTAGE?"%":void 0,errorMessage:(null===(r=B.dynamicDiscountValidationError)||void 0===r?void 0:r.inValidDiscountAmount)?"Required Field":"",state:(null===(a=B.dynamicDiscountValidationError)||void 0===a?void 0:a.inValidDiscountAmount)?"invalid":"none"})}))})),t("div",Object.assign({style:{paddingTop:"24px",marginTop:16,borderTop:`1px solid ${h.colorsV2.stroke.primary}`}},{children:i("div",Object.assign({className:"input__wrapper"},{children:[t(g,Object.assign({style:{marginBottom:10}},{children:"Applies to"})),t("div",Object.assign({style:{display:"flex",flexGrow:0,flexShrink:0,flexBasis:"auto"}},{children:t(b,{width:"300px",options:Z,placement:"bottom-start",onSelect:e=>{const i="value"in e&&e.value===c.ENTIRE_ORDER?{label:"Amount off on order",selected:!0,value:p.AMOUNT_OFF_ORDER}:{label:"Amount off on products",selected:!0,value:p.AMOUNT_OFF_PRODUCTS};B.onChangeCouponType(i),B.setDiscountCouponAppliesTo(e.value),B.setEntitledProductVariable(void 0),B.setDynamicDiscountValidationError((e=>Object.assign(Object.assign({},e),{inValidProductVariableSelection:!1,inValidProductSelection:!1,inValidCollectionSelection:!1})))}})})),(B.discountCouponAppliesTo===c.SPECIFIC_PRODUCTS||B.discountCouponAppliesTo===c.SPECIFIC_COLLECTIONS)&&K(B.discountCouponAppliesTo,U.ENTITLED,"couponAppliesTo")]}))}))]})})(),B.selectedCouponType===p.BUY_X_GET_Y&&(()=>{var e,o,n,l,s;return i(I,Object.assign({style:{border:`1px solid ${h.colorsV2.stroke.primary}`,padding:"16px",borderRadius:"4px",margin:0}},{children:[ee(U.PREREQUISITE),t("div",{style:{width:"100%",height:"1px",backgroundColor:h.colorsV2.stroke.primary,margin:"8px 0"}}),ee(U.ENTITLED),t(D,Object.assign({style:{marginTop:"8px"}},{children:"At a discounted value"})),t("div",{children:t(V,{label:"Free",isActive:100===B.discountData.value,onValueChange:e=>{e?B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:100})):B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:void 0}))}})}),i("div",Object.assign({style:{display:"flex",flexDirection:"column"}},{children:[t(V,{label:"Percentage off",isActive:100!==B.discountData.value,onValueChange:()=>{B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:void 0}))}}),100!==B.discountData.value&&t("div",Object.assign({style:{marginTop:8}},{children:t(y,{value:null!==(n=null===(o=null===(e=B.discountData)||void 0===e?void 0:e.value)||void 0===o?void 0:o.toString())&&void 0!==n?n:"",onChangeText:e=>{B.setDiscountData(Object.assign(Object.assign({},B.discountData),{value:parseInt(e)}))},type:"number",placeholder:"Eg. 50",suffixText:"%",width:"300px",errorMessage:(null===(l=B.dynamicDiscountValidationError)||void 0===l?void 0:l.inValidDiscountAmount)?"Required Field":"",state:(null===(s=B.dynamicDiscountValidationError)||void 0===s?void 0:s.inValidDiscountAmount)?"invalid":"none"})}))]}))]}))})(),!B.selectedCouponType&&t(k,{}),B.allowStaticCoupon&&B.selectedCouponType!==p.BUY_X_GET_Y&&t("div",Object.assign({style:{padding:"24px 0 16px",marginTop:16,borderTop:`1px solid ${h.colorsV2.stroke.primary}`}},{children:t(q,{selectedMinimumRequirement:B.selectedMinimumRequirement,setSelectedMinimumRequirement:B.setSelectedMinimumRequirement,discountData:B.discountData,setDiscountData:B.setDiscountData,currency:B.currency,dynamicDiscountValidationError:B.dynamicDiscountValidationError})})),B.selectedCouponType&&!B.hideExpiration&&i("div",Object.assign({style:{padding:B.selectedCouponType!==p.BUY_X_GET_Y?"24px 0 16px":"8px 0",borderTop:B.selectedCouponType!==p.BUY_X_GET_Y?`1px solid ${h.colorsV2.stroke.primary}`:"none"}},{children:[t(d,{label:"Add expiration",isDisabled:!!B.makeExpiryMandatory,isChecked:B.isAddExpirationChecked,onValueChange:e=>{B.setIsAddExpirationChecked(e),B.setDiscountData(Object.assign(Object.assign({},B.discountData),{expireAfter:void 0,expireAt:void 0})),B.setSelectedExpiration(m.DYNAMIC_EXPIRATION)},boldOnChecked:!0,labelSize:"DEFAULT"}),t(D,Object.assign({style:{color:h.colorsV2.text.secondary,marginLeft:28}},{children:"Make coupon only valid till a certain time"})),B.isAddExpirationChecked&&t(j,{discountData:B.discountData,setDiscountData:B.setDiscountData,isAddExpirationChecked:B.isAddExpirationChecked,inValidCouponExpiry:B.dynamicDiscountValidationError.inValidCouponExpiry,selectedExpiration:B.selectedExpiration,setSelectedExpiration:B.setSelectedExpiration})]}))]})};export{U as DISCOUNT_PRODUCTS,B as default};

package/dist/esm/components/discount-modal/DynamicCoupon/DynamicCoupon.styled.d.ts

@@ -0,0 +1,10 @@
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DiscountOptionsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DiscountDetailsOption: import("styled-components").StyledComponent<"div", any, {
+    selected?: boolean | undefined;
+    isHovered?: boolean | undefined;
+}, never>;
+export declare const AddProductButtonsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductCollectionCard: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CubeIconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ProductVariableCard: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/discount-modal/DynamicCoupon/DynamicCoupon.styled.js

@@ -0,0 +1,76 @@
+import e from"styled-components";import{DEFAULT_THEME as r}from"../../../constants/Theme.js";const o=e.div`
+	width: 28px;
+	height: 28px;
+	cursor: pointer;
+	border-radius: 4px;
+	padding: 4px;
+	display: flex;
+	jusitfy-content: center;
+	align-items: center;
+	&:hover {
+		background-color: ${r.colorsV2.background.base};
+	}
+`,t=e.div`
+	display: flex;
+	gap: 12px;
+	margin-bottom: 8px;
+	margin-top: 16px;
+`,n=e.div`
+	height: 76px;
+	width: 100%;
+	padding: 12px;
+	border: 1px solid
+		${e=>{let{selected:o}=e;return o?r.colorsV2.content.brand:r.colorsV2.stroke.primary}};
+	border-radius: 4px;
+	cursor: pointer;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	text-align: center;
+	gap: 8px;
+	color: ${e=>{let{selected:o}=e;return o?r.colorsV2.text.brand:r.colorsV2.text.secondary}};
+	background-color: ${e=>{let{selected:o}=e;return o?r.colorsV2.background.brandLight:r.colorsV2.surface.subdued}};
+
+	&:hover {
+		background-color: ${e=>{let{selected:o}=e;return o?r.colorsV2.background.brandLight:r.colorsV2.surface.hovered}};
+	}
+`,d=e.div`
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	align-content: center;
+	gap: 16px;
+	margin-top: 16px;
+	width: 100%;
+`,i=e.div`
+	width: 296px;
+	height: 64px;
+	border-radius: 4px;
+	border: 1px solid ${r.colorsV2.stroke.primary};
+	background: ${r.colorsV2.surface.subdued};
+	padding: 8px 12px;
+	gap: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+`,s=e.div`
+	width: 40px;
+	height: 40px;
+	background-color: ${r.colorsV2.background.base};
+	border-radius: 4px;
+	padding: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`,c=e.div`
+	border-radius: 4px;
+	border: 1px solid ${r.colorsV2.stroke.primary};
+	background: ${r.colorsV2.surface.subdued};
+	padding: 6px 8px;
+	gap: 8px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: fit-content;
+`;export{d as AddProductButtonsContainer,s as CubeIconContainer,n as DiscountDetailsOption,t as DiscountOptionsContainer,o as IconContainer,i as ProductCollectionCard,c as ProductVariableCard};

package/dist/esm/components/discount-modal/DynamicCoupon/MinimumRequirementComponent.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ICouponData, MIN_PURCHASE_REQUIREMENT } from '../type';
+interface MinimumRequirementProps {
+    selectedMinimumRequirement: MIN_PURCHASE_REQUIREMENT;
+    setSelectedMinimumRequirement: (value: MIN_PURCHASE_REQUIREMENT) => void;
+    discountData: ICouponData;
+    setDiscountData: React.Dispatch<React.SetStateAction<ICouponData>>;
+    currency?: string;
+    dynamicDiscountValidationError?: {
+        inValidMinimumAmount?: boolean;
+        inValidMinimumQuantity?: boolean;
+    };
+}
+declare const MinimumRequirementComponent: React.FC<MinimumRequirementProps>;
+export default MinimumRequirementComponent;

package/dist/esm/components/discount-modal/DynamicCoupon/MinimumRequirementComponent.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{CheckBox as i}from"../../checkBox/CheckBox.js";import"../../dropdown/DropdownPopover/index.js";import{Dropdown as o}from"../../dropdown/Dropdown.js";import"../../dropdown/ChipDropdown.js";import"react";import"../../zeroState/ZeroState.js";import{BodySecondary as m}from"../../TypographyStyle.js";import{DEFAULT_THEME as s}from"../../../constants/Theme.js";import"../../dropdown/OpenedDropdown/components/description/Description.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/Button.js";import"../../dropdown/OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../../dropdown/OpenedDropdown/components/OpennedDropdown.styled.js";import"../../icon-button/IconButton.js";import{Input as r}from"../../input/Input.js";import"../../dropdown/MenuItem/MenuItem.js";import{MIN_PURCHASE_REQUIREMENT as d}from"../type.js";const u=u=>{var a,c,l,p,M,j,v,D,O;const b=[{selected:u.selectedMinimumRequirement===d.AMOUNT,label:"Minimum order value",value:d.AMOUNT},{selected:u.selectedMinimumRequirement===d.QUANTITY,label:"Minimum number of items",value:d.QUANTITY}];return e(t,{children:[n(i,{label:"Minimum Purchase Requirements",isChecked:u.selectedMinimumRequirement!==d.NA,onValueChange:e=>{e?(u.setSelectedMinimumRequirement(d.AMOUNT),u.setDiscountData(Object.assign(Object.assign({},u.discountData),{minQuantity:void 0,minAmount:void 0}))):(u.setSelectedMinimumRequirement(d.NA),u.setDiscountData(Object.assign(Object.assign({},u.discountData),{minQuantity:void 0,minAmount:void 0})))},boldOnChecked:!0,labelSize:"DEFAULT"}),n(m,Object.assign({style:{color:s.colorsV2.text.secondary,marginLeft:28}},{children:"Enable coupon only after a minimum order value"})),u.selectedMinimumRequirement!==d.NA&&e("div",Object.assign({style:{margin:"16px 0 0 28px"},className:"input__rows"},{children:[e("div",Object.assign({className:"input__wrapper"},{children:[n(m,Object.assign({style:{marginBottom:10}},{children:"Requirements"})),n(o,{options:b,placement:"bottom-start",onSelect:e=>{const t=e.value;u.setSelectedMinimumRequirement(t),u.setDiscountData(Object.assign(Object.assign({},u.discountData),{minQuantity:void 0,minAmount:void 0}))},truncatedText:!1,width:"272px"})]})),n("div",Object.assign({className:"input__wrapper"},{children:n(r,{value:u.selectedMinimumRequirement===d.AMOUNT?null!==(c=null===(a=u.discountData.minAmount)||void 0===a?void 0:a.toString())&&void 0!==c?c:"":null!==(p=null===(l=u.discountData.minQuantity)||void 0===l?void 0:l.toString())&&void 0!==p?p:"",onChangeText:e=>{u.selectedMinimumRequirement===d.AMOUNT?u.setDiscountData(Object.assign(Object.assign({},u.discountData),{minAmount:parseInt(e)})):u.selectedMinimumRequirement===d.QUANTITY&&u.setDiscountData(Object.assign(Object.assign({},u.discountData),{minQuantity:parseInt(e)}))},labelText:u.selectedMinimumRequirement===d.AMOUNT?"Minimum amount":"Minimum no. of items",prefixText:u.selectedMinimumRequirement===d.AMOUNT?null!==(M=u.currency)&&void 0!==M?M:"":void 0,type:"number",placeholder:u.selectedMinimumRequirement===d.AMOUNT?"Eg. 5000":"Eg. 5",errorMessage:(null===(j=u.dynamicDiscountValidationError)||void 0===j?void 0:j.inValidMinimumAmount)||(null===(v=u.dynamicDiscountValidationError)||void 0===v?void 0:v.inValidMinimumQuantity)?"Required Field":"",state:(null===(D=u.dynamicDiscountValidationError)||void 0===D?void 0:D.inValidMinimumAmount)||(null===(O=u.dynamicDiscountValidationError)||void 0===O?void 0:O.inValidMinimumQuantity)?"invalid":"none"})}))]}))]})};export{u as default};

package/dist/esm/components/discount-modal/DynamicCoupon/ZeroState.d.ts

@@ -0,0 +1,2 @@
+declare const renderZeroState: () => import("react/jsx-runtime").JSX.Element;
+export default renderZeroState;

package/dist/esm/components/discount-modal/DynamicCoupon/ZeroState.js

@@ -0,0 +1,16 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r from"styled-components";import{TitleMedium as o,BodyPrimary as n}from"../../TypographyStyle.js";import{DEFAULT_THEME as s}from"../../../constants/Theme.js";import i from"../../../assets/icons/cursor.svg.js";const c=()=>e(d,{children:[t(l,{children:t(i,{width:32,color:s.colorsV2.content.primaryInverse})}),t(o,{children:"No discount has been selected"}),t(n,{children:"Please select a discount type"})]}),d=r.div`
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+	padding: 40px 0;
+	justify-content: center;
+	align-items: center;
+`,l=r.div`
+	height: 52px;
+	width: 52px;
+	background-color: ${s.colorsV2.background.inverse};
+	border-radius: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;export{c as default};

package/dist/esm/components/discount-modal/StaticCoupon/StaticCoupon.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ICouponData, IStaticDiscountValidationError } from "../type";
+interface StaticCouponI {
+    discountData: ICouponData;
+    setDiscountData: React.Dispatch<React.SetStateAction<ICouponData>>;
+    hideProbability: boolean;
+    discountAdminUrl?: string;
+    staticDiscountValidationError?: IStaticDiscountValidationError;
+    currency?: string;
+}
+declare const StaticCoupon: React.FC<StaticCouponI>;
+export default StaticCoupon;

package/dist/esm/components/discount-modal/StaticCoupon/StaticCoupon.js

@@ -0,0 +1 @@
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import o from"../../../assets/icons/info.svg.js";import{Alert as e}from"../../alerts/Alert.js";import{ALERT_TYPES as a,CONTENT_POSITION as n}from"../../alerts/AlertHelper.js";import{Input as r}from"../../input/Input.js";import{DEFAULT_THEME as s}from"../../../constants/Theme.js";import{StaticCouponContainerStyled as l}from"../DiscountModal.styled.js";const d=d=>{var c,u,p,v,b,m,D,g,h;return i(l,{children:[i("div",Object.assign({className:"static-coupon__data"},{children:[t("div",Object.assign({className:"static-input__wrapper"},{children:t(r,{maxCharLimit:30,onChangeText:i=>{d.setDiscountData(Object.assign(Object.assign({},d.discountData),{couponCode:null==i?void 0:i.trim()}))},labelText:"Discount Code",value:d.discountData.couponCode,placeholder:"Eg. FLAT15OFF",isRequired:!0,errorMessage:(null===(c=d.staticDiscountValidationError)||void 0===c?void 0:c.invalidDiscountCode)?"Required Field":"",state:(null===(u=d.staticDiscountValidationError)||void 0===u?void 0:u.invalidDiscountCode)?"invalid":"none",hintText:"Code created on Shopify"})})),t("div",Object.assign({className:"static-input__wrapper"},{children:t(r,{maxCharLimit:30,labelText:"Discount Coupon Title",value:d.discountData.title,onChangeText:i=>{d.setDiscountData(Object.assign(Object.assign({},d.discountData),{title:null==i?void 0:i.trim()}))},hintText:"Same for everyone. Can’t be changed later",isRequired:!0,placeholder:`Eg. “Flat ${null!==(p=d.currency)&&void 0!==p?p:""}15 Off”`,errorMessage:(null===(v=d.staticDiscountValidationError)||void 0===v?void 0:v.invalidCouponTitle)?"Required Field":"",state:(null===(b=d.staticDiscountValidationError)||void 0===b?void 0:b.invalidCouponTitle)?"invalid":"none"})}))]})),t(r,{maxCharLimit:60,labelText:"Coupon Description",value:d.discountData.description,onChangeText:i=>{d.setDiscountData(Object.assign(Object.assign({},d.discountData),{description:null==i?void 0:i.trim()}))},placeholder:"Eg. “Get Flat 15% off”",isRequired:!0,errorMessage:(null===(m=d.staticDiscountValidationError)||void 0===m?void 0:m.invalidCouponDescription)?"Required Field":"",state:(null===(D=d.staticDiscountValidationError)||void 0===D?void 0:D.invalidCouponDescription)?"invalid":"none"}),!d.hideProbability&&t(r,{labelText:"Probability of getting coupon",value:null!==d.discountData.probability&&void 0!==d.discountData.probability?d.discountData.probability.toString():"",type:"number",onChangeText:i=>{d.setDiscountData(Object.assign(Object.assign({},d.discountData),{probability:i.startsWith(".")?parseFloat(parseFloat(`0${i}`).toFixed(2)):parseFloat(parseFloat(i).toFixed(2))}))},placeholder:"Eg. 0.5",width:"288px",hintText:"Enter a decimal value between 0-1",isRequired:!0,errorMessage:(null===(g=d.staticDiscountValidationError)||void 0===g?void 0:g.inValidProbability)?"Enter probability in decimals (0 - 1)":"",state:(null===(h=d.staticDiscountValidationError)||void 0===h?void 0:h.inValidProbability)?"invalid":"none"}),d.discountAdminUrl&&t(e,{type:a.NEUTRAL,text:"To create a discount code on Shopify,",contentPosition:n.START,redirectToText:"click here",redirectTo:d.discountAdminUrl,icon:()=>t(o,{width:16,height:16,color:s.colorsV2.content.secondary})})]})};export{d as default};

package/dist/esm/components/discount-modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DiscountModal';
+export * from './CouponExpiration/CouponExpiration';
+export * from './type';

package/dist/esm/components/discount-modal/type.d.ts

@@ -0,0 +1,107 @@
+import { SelectedItems } from '../product-picker-v2';
+export declare enum MIN_PURCHASE_REQUIREMENT {
+    AMOUNT = "amount",
+    QUANTITY = "quantity",
+    NA = "na"
+}
+export declare enum DISCOUNT_VALUE_TYPES {
+    FIXED_AMOUNT = "fixedAmount",
+    PERCENTAGE = "percentage"
+}
+export declare enum DISCOUNT_TARGET_TYPES {
+    LINE_ITEM = "lineItem",
+    SHIPPING_LINE = "shippingLine"
+}
+export declare enum DISCOUNT_TARGET_SELECTION {
+    ENTITLED = "entitled",
+    ALL = "all"
+}
+export declare enum DISCOUNT_TYPES {
+    AMOUNT_OFF_PRODUCTS = "amountOffProducts",
+    AMOUNT_OFF_ORDER = "amountOffOrder",
+    BUY_X_GET_Y = "buyXGetY",
+    FREE_SHIPPING = "freeShipping"
+}
+export declare enum DISCOUNT_APPLIES_TO {
+    ENTIRE_ORDER = "entireOrder",
+    SPECIFIC_PRODUCTS = "specificProducts",
+    SPECIFIC_COLLECTIONS = "specificCollections"
+}
+export declare enum OFFER_APPLIES_TO {
+    SPECIFIC_PRODUCTS = "specificProducts",
+    SPECIFIC_COLLECTIONS = "specificCollections"
+}
+export interface ProductVariable {
+    displayName: string;
+    actualValue: string;
+    isAvailable: boolean;
+}
+export declare enum COUPON_EXPIRATION {
+    FIXED_EXPIRATION = "fixedExpiration",
+    DYNAMIC_EXPIRATION = "dynamicExpiration"
+}
+export interface ICouponData {
+    description: string;
+    value?: number;
+    quadrant?: number;
+    valueType: DISCOUNT_VALUE_TYPES;
+    targetType: DISCOUNT_TARGET_TYPES;
+    targetSelection: DISCOUNT_TARGET_SELECTION;
+    minAmount?: number;
+    title: string;
+    minQuantity?: number;
+    expireAfter?: number;
+    expireAt?: Date;
+    isStaticCoupon?: boolean;
+    couponCode?: string;
+    prerequisiteProductIds?: number[];
+    prerequisiteVariantIds?: number[];
+    prerequisiteCollectionIds?: number[];
+    entitledProductIds?: number[];
+    entitledVariantIds?: number[];
+    entitledCollectionIds?: number[];
+    allocationLimit?: number;
+    prerequisiteQuantity?: number;
+    entitledQuantity?: number;
+    minPurchaseReq?: MIN_PURCHASE_REQUIREMENT;
+    probability?: number;
+    productsConf?: {
+        entitledProducts: SelectedItems;
+        prerequisiteProducts: SelectedItems;
+    };
+    collectionsConf?: {
+        entitledCollections: SelectedItems;
+        prerequisiteCollections: SelectedItems;
+    };
+    productVariableConf?: {
+        entitledProductVariable: ProductVariable;
+        prerequisiteProductVariable: ProductVariable;
+    };
+}
+export interface IStaticDiscountValidationError {
+    invalidDiscountCode: boolean;
+    invalidCouponDescription: boolean;
+    invalidCouponTitle: boolean;
+    inValidProbability: boolean;
+}
+export interface IDynamicDiscountValidationError {
+    invalidCouponTitle: boolean;
+    inValidProbability: boolean;
+    inValidDiscountAmount: boolean;
+    inValidMinimumQuantity: boolean;
+    inValidMinimumAmount: boolean;
+    inValidCouponExpiry: boolean;
+    inValidProductSelection: boolean;
+    inValidProductVariableSelection: boolean;
+    inValidCollectionSelection: boolean;
+    inValidBuyXValue: boolean;
+    inValidGetYValue: boolean;
+    inValidBuyXProductSelection: boolean;
+    inValidGetYProductSelection: boolean;
+    inValidBuyXCollectionSelection: boolean;
+    inValidGetYCollectionSelection: boolean;
+    inValidBuyXProductVariableSelection: boolean;
+    inValidGetYProductVariableSelection: boolean;
+}
+export declare const initialStaticCouponErrorState: IStaticDiscountValidationError;
+export declare const initialDynamicCouponErrorState: IDynamicDiscountValidationError;

package/dist/esm/components/discount-modal/type.js

@@ -0,0 +1 @@
+var i,n,t,o,e,l,c,a;!function(i){i.AMOUNT="amount",i.QUANTITY="quantity",i.NA="na"}(i||(i={})),function(i){i.FIXED_AMOUNT="fixedAmount",i.PERCENTAGE="percentage"}(n||(n={})),function(i){i.LINE_ITEM="lineItem",i.SHIPPING_LINE="shippingLine"}(t||(t={})),function(i){i.ENTITLED="entitled",i.ALL="all"}(o||(o={})),function(i){i.AMOUNT_OFF_PRODUCTS="amountOffProducts",i.AMOUNT_OFF_ORDER="amountOffOrder",i.BUY_X_GET_Y="buyXGetY",i.FREE_SHIPPING="freeShipping"}(e||(e={})),function(i){i.ENTIRE_ORDER="entireOrder",i.SPECIFIC_PRODUCTS="specificProducts",i.SPECIFIC_COLLECTIONS="specificCollections"}(l||(l={})),function(i){i.SPECIFIC_PRODUCTS="specificProducts",i.SPECIFIC_COLLECTIONS="specificCollections"}(c||(c={})),function(i){i.FIXED_EXPIRATION="fixedExpiration",i.DYNAMIC_EXPIRATION="dynamicExpiration"}(a||(a={}));const u={invalidDiscountCode:!1,invalidCouponDescription:!1,invalidCouponTitle:!1,inValidProbability:!1},d={inValidProbability:!1,invalidCouponTitle:!1,inValidDiscountAmount:!1,inValidProductSelection:!1,inValidCollectionSelection:!1,inValidProductVariableSelection:!1,inValidMinimumQuantity:!1,inValidMinimumAmount:!1,inValidCouponExpiry:!1,inValidBuyXValue:!1,inValidGetYValue:!1,inValidBuyXProductSelection:!1,inValidGetYProductSelection:!1,inValidBuyXCollectionSelection:!1,inValidGetYCollectionSelection:!1,inValidBuyXProductVariableSelection:!1,inValidGetYProductVariableSelection:!1};export{a as COUPON_EXPIRATION,l as DISCOUNT_APPLIES_TO,o as DISCOUNT_TARGET_SELECTION,t as DISCOUNT_TARGET_TYPES,e as DISCOUNT_TYPES,n as DISCOUNT_VALUE_TYPES,i as MIN_PURCHASE_REQUIREMENT,c as OFFER_APPLIES_TO,d as initialDynamicCouponErrorState,u as initialStaticCouponErrorState};

package/dist/esm/components/dropShadow/DropShadow.d.ts

@@ -1,8 +1,7 @@
 import React from 'react';
-declare const DropShadow: React.FC<{
+export declare const DropShadow: React.FC<{
     level: 'z1' | 'z2';
     position: 'up' | 'down';
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
-export default DropShadow;

package/dist/esm/components/dropShadow/DropShadow.js

@@ -1 +1 @@
-import{jsx as p}from"react/jsx-runtime";const x={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=e=>{let{level:t="z1",position:n="down",children:r,style:o}=e;const s=x[t][n];return p("div",Object.assign({style:Object.assign({boxShadow:s},null!=o?o:{})},{children:r}))};export{e as default};
+import{jsx as p}from"react/jsx-runtime";const x={z1:{up:"0px -2px 8px rgba(0, 0, 0, 0.12)",down:"0px 2px 8px rgba(0, 0, 0, 0.12)"},z2:{up:"0px -4px 12px rgba(0, 0, 0, 0.12)",down:"0px 4px 12px rgba(0, 0, 0, 0.12)"}},e=e=>{let{level:n="z1",position:r="down",children:t,style:o}=e;const s=x[n][r];return p("div",Object.assign({style:Object.assign({boxShadow:s},null!=o?o:{})},{children:t}))};export{e as DropShadow};

package/dist/esm/components/dropShadow/index.d.ts

@@ -0,0 +1 @@
+export * from './DropShadow';

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DropdownProps } from "./";
+export declare const ChipDropdown: React.FC<DropdownProps>;
+export declare const ChipDropdownContainer: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+    height?: string | undefined;
+}, never>;

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

@@ -0,0 +1,14 @@
+import{__rest as t}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as e}from"react/jsx-runtime";import{useState as n,useRef as r}from"react";import i from"styled-components";import{DropdownPopover as p}from"./DropdownPopover/index.js";import"./Dropdown.js";import"../zeroState/ZeroState.js";import{BodySecondary as s}from"../TypographyStyle.js";import{COLORS as m}from"../../constants/Theme.js";import"./OpenedDropdown/components/description/Description.styled.js";import"../checkBox/CheckBox.styled.js";import"../list-item/ListItem.js";import"./OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"./OpenedDropdown/components/menu/MenuItem.js";import"./OpenedDropdown/components/menu/MenuList.styled.js";import"../button/Button.js";import"./OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"./OpenedDropdown/components/OpennedDropdown.styled.js";import"../icon-button/IconButton.js";import"../input/Input.js";import"./MenuItem/MenuItem.js";import{Tag as d}from"../tag/Tag.js";import l from"../../assets/icons/chevronDown.svg.js";import c from"../../assets/icons/chevronDownOutline.svg.js";import a from"../../assets/icons/chevronUpOutline.svg.js";const u=i=>{var{placeHolder:u,onSelect:g}=i,j=t(i,["placeHolder","onSelect"]);const[w,f]=n(!1),y=r();return o(p,Object.assign({ref:y,onDropdownVisbilityChange:t=>f(t),onSelect:function(t){null==g||g(t)}},j,{children:"default"==j.inputType?e(h,Object.assign({width:null==j?void 0:j.width,height:null==j?void 0:j.height},{children:[o(s,Object.assign({color:m.content.placeholder},{children:u})),o(l,{style:{transform:w?"rotate(180deg)":"rotate(0deg)"},width:20,height:20,color:m.content.primary})]})):o(d,{tagText:null!=u?u:"",theme:"light",type:"neutral",variant:"regular",TrailingIcon:w?a:c})}))};u.displayName="ChipDropdown";const h=i.div`
+	display: flex;
+	flex-direction: row;
+	width: ${t=>(null==t?void 0:t.width)?t.width:"240px"};
+	height: ${t=>(null==t?void 0:t.height)?t.height:"32px"};
+	gap: 8px;
+	justify-content: space-between;
+	align-items: center;
+	border: 1px solid ${m.stroke.primary};
+	border-radius: 4px;
+	padding-left: 8px;
+	padding-right: 8px;
+	cursor: pointer;
+`;export{u as ChipDropdown,h as ChipDropdownContainer};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SingleOption } from './type';
+interface ChipInputProps {
+    placeholder?: string;
+    chips: SingleOption[];
+    onDeleteChip: (chip: SingleOption) => void;
+    containerStyle?: React.CSSProperties;
+    isDropdownOpened?: boolean;
+    sizeToUse?: 'default' | 'small';
+}
+declare const ChipInput: React.FC<ChipInputProps>;
+export default ChipInput;

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

@@ -0,0 +1 @@
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as l,useEffect as s}from"react";import r from"../../utils/StringUtils.js";import{COLORS as o}from"../../constants/Theme.js";import n from"../../assets/icons/chevronDown.svg.js";import i from"../../assets/icons/cross.svg.js";import{Tag as c}from"../tag/Tag.js";import{BodyCaption as a}from"../TypographyStyle.js";import{ChipInputWrapper as h}from"./Common.styled.js";const m=m=>{let{chips:d,onDeleteChip:g,containerStyle:p={},sizeToUse:j="default",isDropdownOpened:f,placeholder:b="Select.."}=m;const[y,u]=l(),[v,O]=l(0);return s((()=>{if(!d)return;let e=0;const t=(e=>1===e.length?100:2===e.length?40:34)(d);let l=d.filter((l=>(e+=l.label.length,e<=t)));0===l.length&&d.length>0&&(l=[d[0]]),u(l),O(d.length-l.length)}),[d]),e(h,Object.assign({style:Object.assign({},p)},{children:[e("div",Object.assign({className:"chips-container"},{children:[null==y?void 0:y.map(((e,l)=>t("div",Object.assign({style:{zIndex:2}},{children:t(c,Object.assign({tagText:r.truncateText(e.selectedLabel||e.label,40),TrailingIcon:()=>t(i,{width:12,height:12,style:{cursor:"pointer"},onClick:()=>{g(e)}})},{children:e.selectedLabel||e.label}))}),l))),!!v&&t(a,Object.assign({color:o.content.placeholder},{children:`+${v} more`})),0===d.length&&t("div",Object.assign({style:{color:o.content.placeholder}},{children:b}))]})),t("div",{children:t(n,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},width:"small"===j?20:24,height:"small"===j?20:24,color:o.content.primary})})]}))};export{m as default};

package/dist/esm/components/dropdown/Common.styled.d.ts

@@ -1,3 +1,7 @@
-export declare const OverLapAbs: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OverLapAbs: import("styled-components").StyledComponent<"div", any, {
+    disabled?: boolean | undefined;
+    allowEvents?: boolean | undefined;
+}, never>;
 export declare const OpenDropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const LoadingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ChipInputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/esm/components/dropdown/Common.styled.js

@@ -1,20 +1,37 @@
-import o from"styled-components";import{COLORS as r}from"../../constants/Theme.js";const e=o.div`
-	position: absolute;
+import e from"styled-components";import{COLORS as i}from"../../constants/Theme.js";const t=e.div`
+	position: 
+	// if allowEvents is true, then position is relative, else position is absolute
+		${e=>(null==e?void 0:e.allowEvents)?"relative":"absolute"};
 	left: 0px;
 	top: 0px;
 	width: 100%;
 	height: 100%;
 	z-index: 2;
-	cursor: pointer;
-`,i=o.div`
+	cursor: ${e=>(null==e?void 0:e.disabled)?"not-allowed":"pointer"};
+`,o=e.div`
 	margin-top: 8px;
 	margin-bottom: 8px;
-`;o.div`
+`;e.div`
 	display: flex;
 	flex-direction: row;
 	align-items: center;
 	padding: 6px 8px;
-	background: ${r.surface.hovered};
-	border: 1px solid ${r.stroke.primary};
+	background: ${i.surface.hovered};
+	border: 1px solid ${i.stroke.primary};
 	border-radius: 4px;
-`;export{i as OpenDropdownContainer,e as OverLapAbs};
+`;const r=e.div`
+	width: 360px;
+	height: 100%;
+	padding: 8px;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	border-radius: 4px;
+	border: 1px solid ${i.stroke.primary};
+	.chips-container {
+		display: flex;
+		gap: 8px;
+		flex-wrap: wrap;
+		align-items: center;
+	}
+`;export{r as ChipInputWrapper,o as OpenDropdownContainer,t as OverLapAbs};

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

@@ -1,10 +1,18 @@
 import React from 'react';
-import { OpenDropdownProps } from './type';
+import { OpenDropdownProps, SingleOption } from './type';
 export type DropdownProps = OpenDropdownProps & {
     placeHolder?: string;
     size?: 'default' | 'small';
     disabled?: boolean;
     noErrorHint?: boolean;
     buttonWidth?: string;
+    placeHolderHeight?: string;
+    showPlaceholderWhenSelected?: boolean;
+    inputStyle?: React.CSSProperties;
+    inputType?: 'chip' | 'default';
+    onDeleteChip?: (chip: SingleOption) => void;
+    truncatedText?: boolean;
+    'data-test'?: string;
+    showLeadingIconInPlaceholder?: boolean;
 };
 export declare const Dropdown: React.FC<DropdownProps>;

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

@@ -1 +1 @@
-import{__rest as o}from"../../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import{useRef as n,useState as e,useEffect as r}from"react";import{COLORS as i}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import{Input as s}from"../input/Input.js";import{InputStyleContext as a}from"../input/context/InputStyleProvider.js";import{DropdownPopover as d}from"./DropdownPopover/index.js";function p(){}const c=c=>{var u,m,h,{placeHolder:v,size:f,onSelect:g,defaultOptions:b,disabled:j,noErrorHint:w}=c,x=o(c,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint"]);const y=null!=f?f:"default",H=n(),[O,E]=e(null!=b?b:[]);r((()=>{var o;const t=[];null===(o=null==x?void 0:x.options)||void 0===o||o.forEach((o=>{o.options?o.options.forEach((o=>{o.selected&&t.push(Object.assign(Object.assign({},o),{label:o.label}))})):o.selected&&t.push(o)})),E([...t])}),[x.options]),r((()=>{b&&E([...b])}),[b]);const I=O.length?O.map((o=>o.label)).join(", "):void 0;return t(a.Provider,Object.assign({value:{InputWrapper:{height:"small"===y?32:48,width:null!==(m=null!==(u=x.buttonWidth)&&void 0!==u?u:x.width)&&void 0!==m?m:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},input:{minHeight:"100%"}}},{children:t(d,Object.assign({ref:H,onSelect:function(o){Array.isArray(o)?E([...o]):E([o]),null==g||g(o)},disabled:j},x,{children:t(s,{noErrorHint:w,state:j?"disabled":"none",value:null!=I?I:"",errorMessage:x.error,variant:y,placeholder:null!=v?v:"Select an option",width:null!==(h=x.width)&&void 0!==h?h:"100%",onChangeText:p,rightIcon:{icon:()=>{var o;return t(l,{style:{transform:(null===(o=null==H?void 0:H.current)||void 0===o?void 0:o.openDropdown)?"rotate(180deg)":"rotate(0deg)"},onClick:p,width:"small"===y?20:24,height:"small"===y?20:24,color:i.content.primary})}}})}))}))};c.displayName="Dropdown";export{c as Dropdown};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as o,jsxs as t,Fragment as n}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 d from"../../assets/icons/chevronDown.svg.js";import{Input as a}from"../input/Input.js";import{InputStyleContext as p}from"../input/context/InputStyleProvider.js";import c from"./ChipInput.js";import{DropdownPopover as u}from"./DropdownPopover/index.js";import{getSelectedOptionsAsText as h}from"./OpenedDropdown/utils/iterationOnOptions.js";function m(){}const v=v=>{var f,g,w,b,j,{placeHolder:I,size:y,onSelect:x,defaultOptions:O,disabled:S,noErrorHint:H,placeHolderHeight:D,showPlaceholderWhenSelected:T=!1,inputStyle:C={},inputType:P="default",onDeleteChip:E,truncatedText:z,showLeadingIconInPlaceholder:W=!1}=v,A=e(v,["placeHolder","size","onSelect","defaultOptions","disabled","noErrorHint","placeHolderHeight","showPlaceholderWhenSelected","inputStyle","inputType","onDeleteChip","truncatedText","showLeadingIconInPlaceholder"]);const[L,_]=i(!1),k=null!=y?y:"default",M=l(),[N,U]=i(null!=O?O:[]);r((()=>{var e;const o=[];null===(e=null==A?void 0:A.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)})),U([...o])}),[A.options]),r((()=>{O&&U([...O])}),[O]);const V=h(N);return o(p.Provider,Object.assign({value:{InputWrapper:Object.assign({height:D||("small"===k?32:48),width:null!==(g=null!==(f=A.buttonWidth)&&void 0!==f?f:A.width)&&void 0!==g?g:"100%",zIndex:1,cursor:"pointer",padding:"6px 8px"},C),input:{minHeight:"100%"}}},{children:t(u,Object.assign({"data-test":A["data-test"],ref:M,onSelect:function(e){Array.isArray(e)?U([...e]):U([e]),null==x||x(e)},disabled:S,onDropdownVisbilityChange:e=>_(e)},A,{children:["default"==P&&o(a,{version:A.version,noErrorHint:H,state:S?"disabled":"none",value:T?I:null!=V?V:"",errorMessage:A.error,variant:k,placeholder:null!=I?I:"Select an option",width:null!==(w=A.width)&&void 0!==w?w:"100%",onChangeText:m,leftIcon:W&&(null===(b=N[0])||void 0===b?void 0:b.leadingIcon)?{icon:()=>{var e;return o(n,{children:null===(e=N[0])||void 0===e?void 0:e.leadingIcon})}}:void 0,rightIcon:{icon:()=>o(d,{style:{transform:L?"rotate(180deg)":"rotate(0deg)"},onClick:m,width:"small"===k?20:24,height:"small"===k?20:24,color:s.content.primary})},truncateText:null==z||z}),"chip"==P&&o(c,{placeholder:null!=I?I:"Select options",chips:N,onDeleteChip:e=>{null==E||E(e)},isDropdownOpened:L,sizeToUse:k,containerStyle:{width:null!==(j=A.width)&&void 0!==j?j:"100%",cursor:"pointer"}})]}))}))};v.displayName="Dropdown";export{v as Dropdown};

package/dist/esm/components/dropdown/DropdownPopover/index.d.ts

@@ -1,9 +1,17 @@
 import React from 'react';
+import { Placement } from "../../tooltips";
 import { OpenDropdownProps } from '../type';
 export declare const DropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
     isLoading?: boolean | undefined;
     children?: React.ReactNode;
     disabled?: boolean | undefined;
+    onDropdownOpen?: (() => void) | undefined;
+    onDropdownVisbilityChange?: ((isOpen: boolean) => void) | undefined;
+    tooltipContent?: string | undefined;
+    tooltipDirection?: Placement | undefined;
+    showTooltipArrow?: boolean | undefined;
+    allowEvents?: boolean | undefined;
+    'data-test'?: string | undefined;
 } & React.RefAttributes<{
     openDropdown: boolean;
 }>>;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { OpenDropdownProps } from "../type";
+export type MenuItemDropdownProps = OpenDropdownProps & {
+    isHorizontal: boolean;
+    children?: React.ReactNode;
+    hideBorder?: boolean;
+    isNewTag?: boolean;
+};
+export declare const MenuItemDropdown: React.FC<MenuItemDropdownProps>;

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

@@ -0,0 +1,20 @@
+import{jsx as o,jsxs as e}from"react/jsx-runtime";import t from"../../../assets/icons/horizontal_dots.svg.js";import n from"../../../assets/icons/vertical_dots.svg.js";import r from"styled-components";import{DropdownPopover as s}from"../DropdownPopover/index.js";import"../Dropdown.js";import"../ChipDropdown.js";import"react";import"../../zeroState/ZeroState.js";import"../../TypographyStyle.js";import{COLORS as i}from"../../../constants/Theme.js";import"../OpenedDropdown/components/description/Description.styled.js";import"../../checkBox/CheckBox.styled.js";import"../../list-item/ListItem.js";import"../OpenedDropdown/components/menu/FreeFormMenu.styled.js";import"../OpenedDropdown/components/menu/MenuItem.js";import"../OpenedDropdown/components/menu/MenuList.styled.js";import"../../button/Button.js";import"../OpenedDropdown/components/multiSelect/MultiSelectDropdownBottomBar.styled.js";import"../OpenedDropdown/components/OpennedDropdown.styled.js";import{IconButton as p}from"../../icon-button/IconButton.js";import"../../input/Input.js";const d=r.div`
+	:hover {
+		background: ${i.surface.subdued};
+	}
+	position: ${o=>o.isNewTag?"relative":""};
+	.new--tag {
+		box-sizing: border-box;
+		position: absolute;
+		right: -8px;
+		top: -5px;
+		border-radius: 50%;
+		width: 14px;
+		height: 14px;
+		background: ${i.background.negative.vibrant};
+		border: 1.25px solid ${i.surface.standard};
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+`,m=r=>o(d,Object.assign({isNewTag:r.isNewTag},{children:e(s,Object.assign({},r,{children:[o("div",{children:o(p,{Icon:r.isHorizontal?t:n,bordered:!(null==r?void 0:r.hideBorder)})}),r.isNewTag?o("div",{className:"new--tag"}):null]}))}));m.displayName="MenuItemDropdown";export{m as MenuItemDropdown};

package/dist/esm/components/dropdown/MultilevelDropdownPopover/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Placement } from "../../tooltips";
+import { OpenDropdownProps } from '../type';
+export declare const MultilevelDropdownPopover: React.ForwardRefExoticComponent<OpenDropdownProps & {
+    isLoading?: boolean | undefined;
+    children?: React.ReactNode;
+    disabled?: boolean | undefined;
+    onDropdownOpen?: (() => void) | undefined;
+    onDropdownVisbilityChange?: ((isOpen: boolean) => void) | undefined;
+    tooltipContent?: string | undefined;
+    tooltipDirection?: Placement | undefined;
+    showTooltipArrow?: boolean | undefined;
+} & React.RefAttributes<{
+    openDropdown: boolean;
+}>>;

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

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