@cgi-learning-hub/ui/dist/Chip-n1kY-Dsh.cjs

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

"use strict";const le=require("react"),o=require("./index-kjfz41UI.cjs"),$=require("./generateUtilityClasses-CENS22bI.cjs"),te=require("./createSvgIcon-CcWpa9Le.cjs"),z=require("react/jsx-runtime"),ie=require("./memoTheme-Bi1UNdyO.cjs"),k=require("./createSimplePaletteValueFilter-PTK3TAhW.cjs"),E=require("./useSlot-C-aMxEm0.cjs"),S=require("./DefaultPropsProvider-C1g4BXET.cjs"),ne=require("./useForkRef-CFhhTu-Q.cjs"),M=require("./ButtonBase-DSJojbNE.cjs"),t=require("./capitalize-3OjkeP9i.cjs"),ce=require("./unsupportedProp-Bn6XWqwH.cjs");function pe(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const n=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(l,a,n.get?n:{enumerable:!0,get:()=>e[a]})}}return l.default=e,Object.freeze(l)}const d=pe(le),se=te.createSvgIcon(z.jsx("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}),"Cancel");function B(e){return $.generateUtilityClass("MuiChip",e)}const r=$.generateUtilityClasses("MuiChip",["root","sizeSmall","sizeMedium","colorDefault","colorError","colorInfo","colorPrimary","colorSecondary","colorSuccess","colorWarning","disabled","clickable","clickableColorPrimary","clickableColorSecondary","deletable","deletableColorPrimary","deletableColorSecondary","outlined","filled","outlinedPrimary","outlinedSecondary","filledPrimary","filledSecondary","avatar","avatarSmall","avatarMedium","avatarColorPrimary","avatarColorSecondary","icon","iconSmall","iconMedium","iconColorPrimary","iconColorSecondary","label","labelSmall","labelMedium","deleteIcon","deleteIconSmall","deleteIconMedium","deleteIconColorPrimary","deleteIconColorSecondary","deleteIconOutlinedColorPrimary","deleteIconOutlinedColorSecondary","deleteIconFilledColorPrimary","deleteIconFilledColorSecondary","focusVisible"]),de=e=>{const{classes:l,disabled:a,size:n,color:c,iconColor:g,onDelete:u,clickable:p,variant:s}=e,C={root:["root",s,a&&"disabled",`size${t.capitalize(n)}`,`color${t.capitalize(c)}`,p&&"clickable",p&&`clickableColor${t.capitalize(c)}`,u&&"deletable",u&&`deletableColor${t.capitalize(c)}`,`${s}${t.capitalize(c)}`],label:["label",`label${t.capitalize(n)}`],avatar:["avatar",`avatar${t.capitalize(n)}`,`avatarColor${t.capitalize(c)}`],icon:["icon",`icon${t.capitalize(n)}`,`iconColor${t.capitalize(g)}`],deleteIcon:["deleteIcon",`deleteIcon${t.capitalize(n)}`,`deleteIconColor${t.capitalize(c)}`,`deleteIcon${t.capitalize(s)}Color${t.capitalize(c)}`]};return S.composeClasses(C,B,l)},ue=S.styled("div",{name:"MuiChip",slot:"Root",overridesResolver:(e,l)=>{const{ownerState:a}=e,{color:n,iconColor:c,clickable:g,onDelete:u,size:p,variant:s}=a;return[{[`& .${r.avatar}`]:l.avatar},{[`& .${r.avatar}`]:l[`avatar${t.capitalize(p)}`]},{[`& .${r.avatar}`]:l[`avatarColor${t.capitalize(n)}`]},{[`& .${r.icon}`]:l.icon},{[`& .${r.icon}`]:l[`icon${t.capitalize(p)}`]},{[`& .${r.icon}`]:l[`iconColor${t.capitalize(c)}`]},{[`& .${r.deleteIcon}`]:l.deleteIcon},{[`& .${r.deleteIcon}`]:l[`deleteIcon${t.capitalize(p)}`]},{[`& .${r.deleteIcon}`]:l[`deleteIconColor${t.capitalize(n)}`]},{[`& .${r.deleteIcon}`]:l[`deleteIcon${t.capitalize(s)}Color${t.capitalize(n)}`]},l.root,l[`size${t.capitalize(p)}`],l[`color${t.capitalize(n)}`],g&&l.clickable,g&&n!=="default"&&l[`clickableColor${t.capitalize(n)})`],u&&l.deletable,u&&n!=="default"&&l[`deletableColor${t.capitalize(n)}`],l[s],l[`${s}${t.capitalize(n)}`]]}})(ie.memoTheme(({theme:e})=>{const l=e.palette.mode==="light"?e.palette.grey[700]:e.palette.grey[300];return{maxWidth:"100%",fontFamily:e.typography.fontFamily,fontSize:e.typography.pxToRem(13),display:"inline-flex",alignItems:"center",justifyContent:"center",height:32,lineHeight:1.5,color:(e.vars||e).palette.text.primary,backgroundColor:(e.vars||e).palette.action.selected,borderRadius:32/2,whiteSpace:"nowrap",transition:e.transitions.create(["background-color","box-shadow"]),cursor:"unset",outline:0,textDecoration:"none",border:0,padding:0,verticalAlign:"middle",boxSizing:"border-box",[`&.${r.disabled}`]:{opacity:(e.vars||e).palette.action.disabledOpacity,pointerEvents:"none"},[`& .${r.avatar}`]:{marginLeft:5,marginRight:-6,width:24,height:24,color:e.vars?e.vars.palette.Chip.defaultAvatarColor:l,fontSize:e.typography.pxToRem(12)},[`& .${r.avatarColorPrimary}`]:{color:(e.vars||e).palette.primary.contrastText,backgroundColor:(e.vars||e).palette.primary.dark},[`& .${r.avatarColorSecondary}`]:{color:(e.vars||e).palette.secondary.contrastText,backgroundColor:(e.vars||e).palette.secondary.dark},[`& .${r.avatarSmall}`]:{marginLeft:4,marginRight:-4,width:18,height:18,fontSize:e.typography.pxToRem(10)},[`& .${r.icon}`]:{marginLeft:5,marginRight:-6},[`& .${r.deleteIcon}`]:{WebkitTapHighlightColor:"transparent",color:e.alpha((e.vars||e).palette.text.primary,.26),fontSize:22,cursor:"pointer",margin:"0 5px 0 -6px","&:hover":{color:e.alpha((e.vars||e).palette.text.primary,.4)}},variants:[{props:{size:"small"},style:{height:24,[`& .${r.icon}`]:{fontSize:18,marginLeft:4,marginRight:-4},[`& .${r.deleteIcon}`]:{fontSize:16,marginRight:4,marginLeft:-4}}},...Object.entries(e.palette).filter(k.createSimplePaletteValueFilter(["contrastText"])).map(([a])=>({props:{color:a},style:{backgroundColor:(e.vars||e).palette[a].main,color:(e.vars||e).palette[a].contrastText,[`& .${r.deleteIcon}`]:{color:e.alpha((e.vars||e).palette[a].contrastText,.7),"&:hover, &:active":{color:(e.vars||e).palette[a].contrastText}}}})),{props:a=>a.iconColor===a.color,style:{[`& .${r.icon}`]:{color:e.vars?e.vars.palette.Chip.defaultIconColor:l}}},{props:a=>a.iconColor===a.color&&a.color!=="default",style:{[`& .${r.icon}`]:{color:"inherit"}}},{props:{onDelete:!0},style:{[`&.${r.focusVisible}`]:{backgroundColor:e.alpha((e.vars||e).palette.action.selected,`${(e.vars||e).palette.action.selectedOpacity} + ${(e.vars||e).palette.action.focusOpacity}`)}}},...Object.entries(e.palette).filter(k.createSimplePaletteValueFilter(["dark"])).map(([a])=>({props:{color:a,onDelete:!0},style:{[`&.${r.focusVisible}`]:{background:(e.vars||e).palette[a].dark}}})),{props:{clickable:!0},style:{userSelect:"none",WebkitTapHighlightColor:"transparent",cursor:"pointer","&:hover":{backgroundColor:e.alpha((e.vars||e).palette.action.selected,`${(e.vars||e).palette.action.selectedOpacity} + ${(e.vars||e).palette.action.hoverOpacity}`)},[`&.${r.focusVisible}`]:{backgroundColor:e.alpha((e.vars||e).palette.action.selected,`${(e.vars||e).palette.action.selectedOpacity} + ${(e.vars||e).palette.action.focusOpacity}`)},"&:active":{boxShadow:(e.vars||e).shadows[1]}}},...Object.entries(e.palette).filter(k.createSimplePaletteValueFilter(["dark"])).map(([a])=>({props:{color:a,clickable:!0},style:{[`&:hover, &.${r.focusVisible}`]:{backgroundColor:(e.vars||e).palette[a].dark}}})),{props:{variant:"outlined"},style:{backgroundColor:"transparent",border:e.vars?`1px solid ${e.vars.palette.Chip.defaultBorder}`:`1px solid ${e.palette.mode==="light"?e.palette.grey[400]:e.palette.grey[700]}`,[`&.${r.clickable}:hover`]:{backgroundColor:(e.vars||e).palette.action.hover},[`&.${r.focusVisible}`]:{backgroundColor:(e.vars||e).palette.action.focus},[`& .${r.avatar}`]:{marginLeft:4},[`& .${r.avatarSmall}`]:{marginLeft:2},[`& .${r.icon}`]:{marginLeft:4},[`& .${r.iconSmall}`]:{marginLeft:2},[`& .${r.deleteIcon}`]:{marginRight:5},[`& .${r.deleteIconSmall}`]:{marginRight:3}}},...Object.entries(e.palette).filter(k.createSimplePaletteValueFilter()).map(([a])=>({props:{variant:"outlined",color:a},style:{color:(e.vars||e).palette[a].main,border:`1px solid ${e.alpha((e.vars||e).palette[a].main,.7)}`,[`&.${r.clickable}:hover`]:{backgroundColor:e.alpha((e.vars||e).palette[a].main,(e.vars||e).palette.action.hoverOpacity)},[`&.${r.focusVisible}`]:{backgroundColor:e.alpha((e.vars||e).palette[a].main,(e.vars||e).palette.action.focusOpacity)},[`& .${r.deleteIcon}`]:{color:e.alpha((e.vars||e).palette[a].main,.7),"&:hover, &:active":{color:(e.vars||e).palette[a].main}}}}))]}})),ye=S.styled("span",{name:"MuiChip",slot:"Label",overridesResolver:(e,l)=>{const{ownerState:a}=e,{size:n}=a;return[l.label,l[`label${t.capitalize(n)}`]]}})({overflow:"hidden",textOverflow:"ellipsis",paddingLeft:12,paddingRight:12,whiteSpace:"nowrap",variants:[{props:{variant:"outlined"},style:{paddingLeft:11,paddingRight:11}},{props:{size:"small"},style:{paddingLeft:8,paddingRight:8}},{props:{size:"small",variant:"outlined"},style:{paddingLeft:7,paddingRight:7}}]});function U(e){return e.key==="Backspace"||e.key==="Delete"}const K=d.forwardRef(function(l,a){const n=S.useDefaultProps({props:l,name:"MuiChip"}),{avatar:c,className:g,clickable:u,color:p="default",component:s,deleteIcon:C,disabled:I=!1,icon:P,label:W,onClick:T,onDelete:y,onKeyDown:j,onKeyUp:L,size:_="medium",variant:H="filled",tabIndex:A,skipFocusWhenDisabled:G=!1,slots:J={},slotProps:Q={},...X}=n,Y=d.useRef(null),Z=ne.useForkRef(Y,a),N=i=>{i.stopPropagation(),y&&y(i)},x=i=>{i.currentTarget===i.target&&U(i)&&i.preventDefault(),j&&j(i)},m=i=>{i.currentTarget===i.target&&y&&U(i)&&y(i),L&&L(i)},O=u!==!1&&T?!0:u,R=O||y?M.ButtonBase:s||"div",D={...n,component:R,disabled:I,size:_,color:p,iconColor:d.isValidElement(P)&&P.props.color||p,onDelete:!!y,clickable:O,variant:H},v=de(D),h=R===M.ButtonBase?{component:s||"div",focusVisibleClassName:v.focusVisible,...y&&{disableRipple:!0}}:{};let F=null;y&&(F=C&&d.isValidElement(C)?d.cloneElement(C,{className:$.clsx(C.props.className,v.deleteIcon),onClick:N}):z.jsx(se,{className:v.deleteIcon,onClick:N}));let w=null;c&&d.isValidElement(c)&&(w=d.cloneElement(c,{className:$.clsx(v.avatar,c.props.className)}));let V=null;P&&d.isValidElement(P)&&(V=d.cloneElement(P,{className:$.clsx(v.icon,P.props.className)})),process.env.NODE_ENV!=="production"&&w&&V&&console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one.");const q={slots:J,slotProps:Q},[ee,oe]=E.useSlot("root",{elementType:ue,externalForwardedProps:{...q,...X},ownerState:D,shouldForwardComponentProp:!0,ref:Z,className:$.clsx(v.root,g),additionalProps:{disabled:O&&I?!0:void 0,tabIndex:G&&I?-1:A,...h},getSlotProps:i=>({...i,onClick:f=>{var b;(b=i.onClick)==null||b.call(i,f),T==null||T(f)},onKeyDown:f=>{var b;(b=i.onKeyDown)==null||b.call(i,f),x==null||x(f)},onKeyUp:f=>{var b;(b=i.onKeyUp)==null||b.call(i,f),m==null||m(f)}})}),[ae,re]=E.useSlot("label",{elementType:ye,externalForwardedProps:q,ownerState:D,className:v.label});return z.jsxs(ee,{as:R,...oe,children:[w||V,z.jsx(ae,{...re,children:W}),F]})});process.env.NODE_ENV!=="production"&&(K.propTypes={avatar:o.PropTypes.element,children:ce.unsupportedProp,classes:o.PropTypes.object,className:o.PropTypes.string,clickable:o.PropTypes.bool,color:o.PropTypes.oneOfType([o.PropTypes.oneOf(["default","primary","secondary","error","info","success","warning"]),o.PropTypes.string]),component:o.PropTypes.elementType,deleteIcon:o.PropTypes.element,disabled:o.PropTypes.bool,icon:o.PropTypes.element,label:o.PropTypes.node,onClick:o.PropTypes.func,onDelete:o.PropTypes.func,onKeyDown:o.PropTypes.func,onKeyUp:o.PropTypes.func,size:o.PropTypes.oneOfType([o.PropTypes.oneOf(["medium","small"]),o.PropTypes.string]),skipFocusWhenDisabled:o.PropTypes.bool,slotProps:o.PropTypes.shape({label:o.PropTypes.oneOfType([o.PropTypes.func,o.PropTypes.object]),root:o.PropTypes.oneOfType([o.PropTypes.func,o.PropTypes.object])}),slots:o.PropTypes.shape({label:o.PropTypes.elementType,root:o.PropTypes.elementType}),sx:o.PropTypes.oneOfType([o.PropTypes.arrayOf(o.PropTypes.oneOfType([o.PropTypes.func,o.PropTypes.object,o.PropTypes.bool])),o.PropTypes.func,o.PropTypes.object]),tabIndex:o.PropTypes.number,variant:o.PropTypes.oneOfType([o.PropTypes.oneOf(["filled","outlined"]),o.PropTypes.string])});exports.Chip=K;exports.chipClasses=r;exports.getChipUtilityClass=B;