@up42/up-components 0.1.3 → 0.1.4

package/dist/cjs/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@up42/design-system-tokens/dist/json/tokens.json"),t=require("@mui/material"),o=require("react"),a=require("@mui/material/styles"),r=require("@mui/material/Button"),l=require("@mui/material/Typography"),n=require("@mui/material/InputAdornment"),i=require("@mui/material/IconButton"),d=require("@mui/icons-material/VisibilityOutlined"),u=require("@mui/icons-material/VisibilityOffOutlined");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=c(e),s=c(o),m=c(r),p=c(l),g=c(n),b=c(i),h=c(d),y=c(u),x=function(){return x=Object.assign||function(e){for(var t,o=1,a=arguments.length;o<a;o++)for(var r in t=arguments[o])Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r]);return e},x.apply(this,arguments)};function v(e,t){var o={};for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&t.indexOf(a)<0&&(o[a]=e[a]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var r=0;for(a=Object.getOwnPropertySymbols(e);r<a.length;r++)t.indexOf(a[r])<0&&Object.prototype.propertyIsEnumerable.call(e,a[r])&&(o[a[r]]=e[a[r]])}return o}var z={styleOverrides:{root:{fontSize:"12px",fontWeight:600,fontFamily:f.default.font.family.text,"& .MuiChip-icon":{width:"12px",height:"12px",marginLeft:f.default.size.spacing.scale8}},colorDefault:{backgroundColor:f.default.color.base.gray10,color:f.default.color.base.gray60},colorPrimary:{backgroundColor:f.default.color.base.indigo10,color:f.default.color.base.indigo80},colorSecondary:{backgroundColor:f.default.color.base.pink10,color:f.default.color.base.pink80},colorError:{backgroundColor:f.default.color.base.red10,color:f.default.color.base.red50},colorInfo:{backgroundColor:f.default.color.base.indigo10,color:f.default.color.base.indigo80},colorSuccess:{backgroundColor:f.default.color.base.green10,color:f.default.color.base.green80}}},k={h1:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.default,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.xlarge},h2:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.small,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.xlarge},h3:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.xsmall,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.large},body1:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.body.default,fontWeight:f.default.font.weight.normal,lineHeight:f.default.font.lineHeight.large},body2:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.body.default,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.large},caption:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.caption.default,fontWeight:f.default.font.weight.normal,lineHeight:f.default.font.lineHeight.medium},overline:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.overline.default,letterSpacing:"initial",fontWeight:f.default.font.weight.bold,color:f.default.color.base.gray60}},E={small:"".concat(f.default.size.spacing.scale4," ").concat(f.default.size.spacing.scale8),medium:"".concat(f.default.size.spacing.scale8," ").concat(f.default.size.spacing.scale16),large:"".concat(f.default.size.spacing.scale16," ").concat(f.default.size.spacing.scale32)},C={styleOverrides:{root:{textTransform:"none",lineHeight:f.default.size.spacing.scale16,fontWeight:f.default.font.weight.bold,fontFamily:f.default.font.family.text},contained:{padding:E.medium},containedSizeSmall:{padding:E.small},containedSizeLarge:{padding:E.large},text:{padding:E.medium},textSizeSmall:{padding:E.small},textSizeLarge:{padding:E.large},outlined:{padding:"7px ".concat(f.default.size.spacing.scale16)},outlinedSizeSmall:{padding:E.small},outlinedSizeLarge:{padding:E.large},sizeSmall:{fontSize:f.default.size.font.label.default},sizeLarge:{fontSize:f.default.size.font.label.large},startIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}},endIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}}},defaultProps:{disableFocusRipple:!0},MuiIconButton:{root:{"&&:hover":{backgroundColor:"transparent"}}}},S={styleOverrides:{root:{color:f.default.color.base.gray60,backgroundColor:f.default.color.background.dark},sizeSmall:{padding:"3px"}}},w={styleOverrides:{root:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.label.default,fontWeight:f.default.font.weight.bold,width:f.default.size.spacing.scale24,height:f.default.size.spacing.scale24,"& .MuiSvgIcon-root":{width:f.default.size.spacing.scale16}},colorDefault:{backgroundColor:f.default.color.background.dark,"& .MuiSvgIcon-root":{color:f.default.color.base.gray60}}}},F={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:f.default.color.border.default,"& svg":{width:"16px",height:"16px"},"&&:hover":{backgroundColor:"transparent"}},colorPrimary:{"&$checked":{"&&:hover":{backgroundColor:"transparent"}}},colorSecondary:{"&$checked":{color:f.default.color.brand.darkMatter},"&$disabled":{opacity:.5}}}},O={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:f.default.color.border.default,"& svg":{width:"16px",height:"16px"},"&:hover":{background:"none"}}}},M={styleOverrides:{root:{marginRight:16},colorSecondary:{color:f.default.color.base.gray0,"&$checked":{color:f.default.color.base.gray0,left:2,"&:hover":{backgroundColor:"transparent"}},"&$disabled":{color:f.default.color.base.gray0}},track:{position:"absolute",width:48,height:24,borderRadius:12,opacity:1,left:"calc(50% - 48px/2)",top:"calc(50% - 24px/2)",backgroundColor:f.default.color.background.light,border:"2px solid ".concat(f.default.color.border.default),boxSizing:"border-box","$checked$checked + &":{opacity:1,backgroundColor:f.default.color.brand.darkMatter,border:"2px solid ".concat(f.default.color.brand.darkMatter)},"$disabled$disabled + &":{opacity:.5,cursor:"not-allowed"}},thumb:{boxShadow:"none"}}},P={styleOverrides:{outlined:{position:"relative",padding:f.default.size.spacing.scale8,fontSize:f.default.size.font.label.default,borderRadius:f.default.size.spacing.scale6,width:"100%","&.Mui-disabled":{backgroundColor:f.default.color.background.dark,color:f.default.color.text.light}}}},L={styleOverrides:{root:{input:{padding:f.default.size.spacing.scale8,fontSize:f.default.size.font.label.default,height:f.default.size.spacing.scale16},"& .MuiInputAdornment-root":{button:{padding:"0 ".concat(f.default.size.spacing.scale8," 0 0"),backgroundColor:"transparent"},svg:{width:f.default.size.spacing.scale16,height:f.default.size.spacing.scale16}}}}},B={styleOverrides:{outlined:{notchedOutline:{borderColor:f.default.color.border.default}},root:{underline:{"&:before":{borderBottom:"none"},"&:after":{borderBottom:"none"},"&:hover":{borderBottom:"none"},"&&:hover::before":{border:"none"}}}}};f.default.size.font.body.default,f.default.font.family.text,f.default.color.base.gray100;var T={styleOverrides:{textColorPrimary:{textTransform:"none",minWidth:"auto",fontWeight:700,marginRight:"".concat(f.default.size.spacing.scale16),fontFamily:f.default.font.family.text,color:f.default.color.base.gray60,padding:"0 0 ".concat(f.default.size.spacing.scale16," 0"),"&:hover":{color:f.default.color.brand.darkMatter,opacity:1},"&$selected":{color:f.default.color.brand.darkMatter},"&:focus":{color:f.default.color.brand.darkMatter}}},defaultProps:{disableRipple:!0}};f.default.size.font.caption.default;var W,j,H,I={styleOverrides:{root:{borderBottom:"1px solid ".concat(f.default.color.base.gray20)},indicator:{backgroundColor:f.default.color.brand.darkMatter}}},R={styleOverrides:{root:{fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.medium,fontFamily:f.default.font.family.text,fontSize:f.default.size.font.caption.default,color:f.default.color.text.base,marginBottom:f.default.size.spacing.scale8}}},q=t.createTheme({typography:x({},k),palette:{background:{default:"#ffffff"},primary:{main:f.default.color.brand.darkMatter},secondary:{main:f.default.color.brand.titanPink},error:{main:f.default.color.utility.danger},info:{main:f.default.color.utility.info},success:{main:f.default.color.base.green60}},components:{MuiButton:C,MuiButtonBase:{defaultProps:{disableRipple:!0,disableTouchRipple:!0}},MuiContainer:{styleOverrides:{maxWidthLg:{"@media (min-width: 1280px)":{maxWidth:"1185px"}}}},MuiIconButton:S,MuiChip:z,MuiInput:B,MuiTextField:L,MuiFormLabel:R,MuiTabs:I,MuiTab:T,MuiAvatar:w,MuiCheckbox:F,MuiRadio:O,MuiSwitch:M,MuiSelect:P,MuiLink:{styleOverrides:{root:{cursor:"pointer"}}},MuiDivider:{styleOverrides:{root:{margin:"16px 0"}}},MuiFormControl:{styleOverrides:{root:{width:"100%"}}}}}),$=a.styled(t.CircularProgress)(H||(W=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],j=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],Object.defineProperty?Object.defineProperty(W,"raw",{value:j}):W.raw=j,H=W)),A={small:6,medium:8,large:12,fluid:12},G=function(e){var o=v(e,[]);return s.default.createElement(t.Checkbox,x({},o))},N=function(e){return s.default.createElement(t.Radio,x({},e))},D=function(e){return s.default.createElement(t.Switch,x({},e))},U=function(e){return s.default.createElement(t.Select,x({variant:"outlined"},e))},V=function(e){var a=e.type,r=v(e,["type"]),l=o.useState(!1),n=l[0],i=l[1],d=x(x({},r.InputProps),"password"===a&&{endAdornment:s.default.createElement(g.default,{position:"end"},s.default.createElement(b.default,{"aria-label":"toggle password visibility",onClick:function(){return i(!n)},edge:"end"},n?s.default.createElement(h.default,null):s.default.createElement(y.default,null)))});return s.default.createElement(t.TextField,x({},r,{type:n?"text":a,InputProps:d}))};Object.defineProperty(exports,"tokens",{enumerable:!0,get:function(){return f.default}}),exports.Avatar=function(e){var o=e.icon,a=e.firstName,r=void 0===a?"":a,l=e.lastName,n=void 0===l?"":l,i=v(e,["icon","firstName","lastName"]),d="".concat(r.substring(0,1)).concat(n.substring(0,1)).toLocaleUpperCase(),u=d?f.default.color.brand.titanPink:f.default.color.background.dark;return s.default.createElement(t.Avatar,x({sx:x({backgroundColor:u},i.sx)},i),d||o)},exports.Box=function(e){var o=e.children,a=v(e,["children"]);return s.default.createElement(t.Box,x({},a),o)},exports.Button=function(e){var t=e.color,o=void 0===t?"primary":t,a=e.variant,r=void 0===a?"contained":a,l=e.size,n=void 0===l?"medium":l,i=e.loading,d=e.children,u=v(e,["color","variant","size","loading","children"]);return s.default.createElement(m.default,x({size:n,variant:r,color:o,disabled:i},u),s.default.createElement("span",{style:{opacity:i?0:1}},d),i&&s.default.createElement($,{size:20,color:"inherit"}))},exports.Checkbox=G,exports.Chip=function(e){var o=e.label,a=v(e,["label"]);return s.default.createElement(t.Chip,x({size:"small",label:o},a))},exports.Container=function(e){var o=e.component,a=void 0===o?"div":o,r=e.size,l=void 0===r?"large":r,n=e.children,i=v(e,["component","size","children"]),d="fluid"===l;return s.default.createElement(t.Container,x({component:a,disableGutters:d,maxWidth:!d&&"lg",sx:x({display:"flex",justifyContent:"center"},i.sx)},i),s.default.createElement(t.Grid,{container:!0,justifyContent:"center"},s.default.createElement(t.Grid,{item:!0,md:A[l]},n)))},exports.FormCheckbox=function(e){var o=e.id,a=e.required,r=void 0===a||a,l=e.data,n=e.label,i=e.error,d=e.helperText;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:i},n," ",r?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(t.FormGroup,null,l.map((function(e,a){var r=e.value,l=e.label;return s.default.createElement(t.FormControlLabel,{key:a,value:r,label:l||"",sx:{fontSize:f.default.size.font.base,color:f.default.color.text.base},control:s.default.createElement(G,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(a)}})})}))),i&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:i},d))},exports.FormInput=function(e){var o=e.id,a=e.required,r=void 0===a||a,l=e.label,n=e.error,i=e.helperText,d=v(e,["id","required","label","error","helperText"]);return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:n},l," ",!r&&s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(V,x({},d,{id:o,error:n,inputProps:{"data-testid":o}})),n&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:n},i))},exports.FormRadio=function(e){var o=e.id,a=e.helperText,r=e.label,l=e.error,n=e.required,i=void 0===n||n,d=e.name,u=e.data;return s.default.createElement(t.FormControl,{component:"fieldset",error:l},s.default.createElement(t.FormLabel,{component:"legend"},r," ",i?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(t.RadioGroup,{"aria-label":d,name:d},u.map((function(e,a){var r=e.value,l=e.label;return s.default.createElement(t.FormControlLabel,{value:r,key:r,label:l||"",sx:{fontSize:f.default.size.font.base,color:f.default.color.text.base},control:s.default.createElement(N,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(a)}})})}))),l&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0}},a))},exports.FormSelect=function(e){var o=e.id,a=e.required,r=void 0===a||a,l=e.options,n=e.label,i=e.error,d=e.placeholder,u=e.helperText;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:i},n," ",r?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(U,{id:o,placeholder:d,error:i},l.map((function(e){return s.default.createElement(t.MenuItem,{key:e.value,value:e.value},e.text)}))),i&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:i},u))},exports.FormSwitch=function(e){var o=e.id,a=e.label,r=e.checked;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label"},a),s.default.createElement(t.FormControlLabel,{control:s.default.createElement(D,{id:o}),label:"".concat(r?"Active":"Inactive")}))},exports.Input=V,exports.Link=function(e){var o=e.children,a=v(e,["children"]);return s.default.createElement(t.Link,x({underline:"hover",variant:"caption",component:"span"},a),o)},exports.Radio=N,exports.Select=U,exports.Switch=D,exports.Typography=function(e){var t=e.children,o=v(e,["children"]);return s.default.createElement(p.default,x({},o),t)},exports.UpComponentsProvider=function(e){return s.default.createElement(s.default.Fragment,null,s.default.createElement(t.CssBaseline,null),s.default.createElement(a.ThemeProvider,{theme:q},e.children))},exports.theme=q,Object.keys(t).forEach((function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})}));
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@up42/design-system-tokens/dist/json/tokens.json"),t=require("@mui/material"),o=require("react"),r=require("@mui/material/styles"),a=require("@mui/material/Button"),l=require("@mui/material/Typography"),n=require("@mui/material/InputAdornment"),i=require("@mui/material/IconButton"),d=require("@mui/icons-material/VisibilityOutlined"),u=require("@mui/icons-material/VisibilityOffOutlined");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=c(e),s=c(o),m=c(a),p=c(l),g=c(n),h=c(i),b=c(d),y=c(u),x=function(){return x=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var a in t=arguments[o])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e},x.apply(this,arguments)};function v(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(o[r[a]]=e[r[a]])}return o}var z={styleOverrides:{root:{fontSize:"12px",fontWeight:600,fontFamily:f.default.font.family.text,"& .MuiChip-icon":{width:"12px",height:"12px",marginLeft:f.default.size.spacing.scale8}},colorDefault:{backgroundColor:f.default.color.gray10,color:f.default.color.gray60},colorPrimary:{backgroundColor:f.default.color.indigo10,color:f.default.color.indigo80},colorSecondary:{backgroundColor:f.default.color.pink10,color:f.default.color.pink80},colorError:{backgroundColor:f.default.color.red10,color:f.default.color.red50},colorInfo:{backgroundColor:f.default.color.indigo10,color:f.default.color.indigo80},colorSuccess:{backgroundColor:f.default.color.green10,color:f.default.color.green80}}},k={h1:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.default,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.xlarge},h2:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.small,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.xlarge},h3:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.heading.xsmall,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.large},body1:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.body.default,fontWeight:f.default.font.weight.normal,lineHeight:f.default.font.lineHeight.large},body2:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.body.default,fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.large},caption:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.caption.default,fontWeight:f.default.font.weight.normal,lineHeight:f.default.font.lineHeight.medium},overline:{fontFamily:f.default.font.family.heading,fontSize:f.default.size.font.overline.default,letterSpacing:"initial",fontWeight:f.default.font.weight.bold,color:f.default.color.gray60}},E={small:"".concat(f.default.size.spacing.scale4," ").concat(f.default.size.spacing.scale8),medium:"".concat(f.default.size.spacing.scale8," ").concat(f.default.size.spacing.scale16),large:"".concat(f.default.size.spacing.scale16," ").concat(f.default.size.spacing.scale32)},C={styleOverrides:{root:{textTransform:"none",lineHeight:f.default.size.spacing.scale16,fontWeight:f.default.font.weight.bold,fontFamily:f.default.font.family.text},contained:{padding:E.medium},containedSizeSmall:{padding:E.small},containedSizeLarge:{padding:E.large},text:{padding:E.medium},textSizeSmall:{padding:E.small},textSizeLarge:{padding:E.large},outlined:{padding:"7px ".concat(f.default.size.spacing.scale16)},outlinedSizeSmall:{padding:E.small},outlinedSizeLarge:{padding:E.large},sizeSmall:{fontSize:f.default.size.font.label.default},sizeLarge:{fontSize:f.default.size.font.label.large},startIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}},endIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}}},defaultProps:{disableFocusRipple:!0},MuiIconButton:{root:{"&&:hover":{backgroundColor:"transparent"}}}},S={styleOverrides:{root:{color:f.default.color.gray60,backgroundColor:f.default.color.background.dark},sizeSmall:{padding:"3px"}}},w={styleOverrides:{root:{fontFamily:f.default.font.family.text,fontSize:f.default.size.font.label.default,fontWeight:f.default.font.weight.bold,width:f.default.size.spacing.scale24,height:f.default.size.spacing.scale24,"& .MuiSvgIcon-root":{width:f.default.size.spacing.scale16}},colorDefault:{backgroundColor:f.default.color.background.dark,"& .MuiSvgIcon-root":{color:f.default.color.gray60}}}},F={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:f.default.color.border.default,"& svg":{width:"16px",height:"16px"},"&&:hover":{backgroundColor:"transparent"}},colorPrimary:{"&$checked":{"&&:hover":{backgroundColor:"transparent"}}},colorSecondary:{"&$checked":{color:f.default.color.brand.darkMatter},"&$disabled":{opacity:.5}}}},O={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:f.default.color.border.default,"& svg":{width:"16px",height:"16px"},"&:hover":{background:"none"}}}},M={styleOverrides:{root:{marginRight:16},colorSecondary:{color:f.default.color.gray0,"&$checked":{color:f.default.color.gray0,left:2,"&:hover":{backgroundColor:"transparent"}},"&$disabled":{color:f.default.color.gray0}},track:{position:"absolute",width:48,height:24,borderRadius:12,opacity:1,left:"calc(50% - 48px/2)",top:"calc(50% - 24px/2)",backgroundColor:f.default.color.background.light,border:"2px solid ".concat(f.default.color.border.default),boxSizing:"border-box","$checked$checked + &":{opacity:1,backgroundColor:f.default.color.brand.darkMatter,border:"2px solid ".concat(f.default.color.brand.darkMatter)},"$disabled$disabled + &":{opacity:.5,cursor:"not-allowed"}},thumb:{boxShadow:"none"}}},P={styleOverrides:{outlined:{position:"relative",padding:f.default.size.spacing.scale8,fontSize:f.default.size.font.label.default,borderRadius:f.default.size.spacing.scale6,width:"100%","&.Mui-disabled":{backgroundColor:f.default.color.background.dark,color:f.default.color.text.light}}}},L={styleOverrides:{root:{input:{padding:f.default.size.spacing.scale8,fontSize:f.default.size.font.label.default,height:f.default.size.spacing.scale16},"& .MuiInputAdornment-root":{button:{padding:"0 ".concat(f.default.size.spacing.scale8," 0 0"),backgroundColor:"transparent"},svg:{width:f.default.size.spacing.scale16,height:f.default.size.spacing.scale16}}}}},B={styleOverrides:{outlined:{notchedOutline:{borderColor:f.default.color.border.default}},root:{underline:{"&:before":{borderBottom:"none"},"&:after":{borderBottom:"none"},"&:hover":{borderBottom:"none"},"&&:hover::before":{border:"none"}}}}};f.default.size.font.body.default,f.default.font.family.text,f.default.color.gray100;var T={styleOverrides:{textColorPrimary:{textTransform:"none",minWidth:"auto",fontWeight:700,marginRight:"".concat(f.default.size.spacing.scale16),fontFamily:f.default.font.family.text,color:f.default.color.gray60,padding:"0 0 ".concat(f.default.size.spacing.scale16," 0"),"&:hover":{color:f.default.color.brand.darkMatter,opacity:1},"&$selected":{color:f.default.color.brand.darkMatter},"&:focus":{color:f.default.color.brand.darkMatter}}},defaultProps:{disableRipple:!0}};f.default.size.font.caption.default;var W,j,H,I={styleOverrides:{root:{borderBottom:"1px solid ".concat(f.default.color.gray20)},indicator:{backgroundColor:f.default.color.brand.darkMatter}}},R={styleOverrides:{root:{fontWeight:f.default.font.weight.bold,lineHeight:f.default.font.lineHeight.medium,fontFamily:f.default.font.family.text,fontSize:f.default.size.font.caption.default,color:f.default.color.text.base,marginBottom:f.default.size.spacing.scale8}}},q=t.createTheme({typography:x({},k),palette:{background:{default:"#ffffff"},primary:{main:f.default.color.brand.darkMatter},secondary:{main:f.default.color.brand.titanPink},error:{main:f.default.color.utility.danger},info:{main:f.default.color.utility.info},success:{main:f.default.color.green60}},components:{MuiButton:C,MuiButtonBase:{defaultProps:{disableRipple:!0,disableTouchRipple:!0}},MuiContainer:{styleOverrides:{maxWidthLg:{"@media (min-width: 1280px)":{maxWidth:"1185px"}}}},MuiIconButton:S,MuiChip:z,MuiInput:B,MuiTextField:L,MuiFormLabel:R,MuiTabs:I,MuiTab:T,MuiAvatar:w,MuiCheckbox:F,MuiRadio:O,MuiSwitch:M,MuiSelect:P,MuiLink:{styleOverrides:{root:{cursor:"pointer"}}},MuiDivider:{styleOverrides:{root:{margin:"16px 0"}}},MuiFormControl:{styleOverrides:{root:{width:"100%"}}}}}),$=r.styled(t.CircularProgress)(H||(W=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],j=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],Object.defineProperty?Object.defineProperty(W,"raw",{value:j}):W.raw=j,H=W)),A={small:6,medium:8,large:12,fluid:12},G=function(e){var o=v(e,[]);return s.default.createElement(t.Checkbox,x({},o))},N=function(e){return s.default.createElement(t.Radio,x({},e))},D=function(e){return s.default.createElement(t.Switch,x({},e))},U=function(e){return s.default.createElement(t.Select,x({variant:"outlined"},e))},V=function(e){var r=e.type,a=v(e,["type"]),l=o.useState(!1),n=l[0],i=l[1],d=x(x({},a.InputProps),"password"===r&&{endAdornment:s.default.createElement(g.default,{position:"end"},s.default.createElement(h.default,{"aria-label":"toggle password visibility",onClick:function(){return i(!n)},edge:"end"},n?s.default.createElement(b.default,null):s.default.createElement(y.default,null)))});return s.default.createElement(t.TextField,x({},a,{type:n?"text":r,InputProps:d}))};Object.defineProperty(exports,"tokens",{enumerable:!0,get:function(){return f.default}}),exports.Avatar=function(e){var o=e.icon,r=e.firstName,a=void 0===r?"":r,l=e.lastName,n=void 0===l?"":l,i=v(e,["icon","firstName","lastName"]),d="".concat(a.substring(0,1)).concat(n.substring(0,1)).toLocaleUpperCase(),u=d?f.default.color.brand.titanPink:f.default.color.background.dark;return s.default.createElement(t.Avatar,x({sx:x({backgroundColor:u},i.sx)},i),d||o)},exports.Box=function(e){var o=e.children,r=v(e,["children"]);return s.default.createElement(t.Box,x({},r),o)},exports.Button=function(e){var t=e.color,o=void 0===t?"primary":t,r=e.variant,a=void 0===r?"contained":r,l=e.size,n=void 0===l?"medium":l,i=e.loading,d=e.children,u=v(e,["color","variant","size","loading","children"]);return s.default.createElement(m.default,x({size:n,variant:a,color:o,disabled:i},u),s.default.createElement("span",{style:{opacity:i?0:1}},d),i&&s.default.createElement($,{size:20,color:"inherit"}))},exports.Checkbox=G,exports.Chip=function(e){var o=e.label,r=v(e,["label"]);return s.default.createElement(t.Chip,x({size:"small",label:o},r))},exports.Container=function(e){var o=e.component,r=void 0===o?"div":o,a=e.size,l=void 0===a?"large":a,n=e.children,i=v(e,["component","size","children"]),d="fluid"===l;return s.default.createElement(t.Container,x({component:r,disableGutters:d,maxWidth:!d&&"lg",sx:x({display:"flex",justifyContent:"center"},i.sx)},i),s.default.createElement(t.Grid,{container:!0,justifyContent:"center"},s.default.createElement(t.Grid,{item:!0,md:A[l]},n)))},exports.FormCheckbox=function(e){var o=e.id,r=e.required,a=void 0===r||r,l=e.data,n=e.label,i=e.error,d=e.helperText;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:i},n," ",a?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(t.FormGroup,null,l.map((function(e,r){var a=e.value,l=e.label;return s.default.createElement(t.FormControlLabel,{key:r,value:a,label:l||"",sx:{fontSize:f.default.size.font.base,color:f.default.color.text.base},control:s.default.createElement(G,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),i&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:i},d))},exports.FormInput=function(e){var o=e.id,r=e.required,a=void 0===r||r,l=e.label,n=e.error,i=e.helperText,d=v(e,["id","required","label","error","helperText"]);return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:n},l," ",!a&&s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(V,x({},d,{id:o,error:n,inputProps:{"data-testid":o}})),n&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:n},i))},exports.FormRadio=function(e){var o=e.id,r=e.helperText,a=e.label,l=e.error,n=e.required,i=void 0===n||n,d=e.name,u=e.data;return s.default.createElement(t.FormControl,{component:"fieldset",error:l},s.default.createElement(t.FormLabel,{component:"legend"},a," ",i?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(t.RadioGroup,{"aria-label":d,name:d},u.map((function(e,r){var a=e.value,l=e.label;return s.default.createElement(t.FormControlLabel,{value:a,key:a,label:l||"",sx:{fontSize:f.default.size.font.base,color:f.default.color.text.base},control:s.default.createElement(N,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),l&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0}},r))},exports.FormSelect=function(e){var o=e.id,r=e.required,a=void 0===r||r,l=e.options,n=e.label,i=e.error,d=e.placeholder,u=e.helperText;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label",error:i},n," ",a?"":s.default.createElement(t.Box,{component:"span",sx:{fontWeight:f.default.font.weight.normal,color:f.default.color.text.light}},"(optional)")),s.default.createElement(U,{id:o,placeholder:d,error:i},l.map((function(e){return s.default.createElement(t.MenuItem,{key:e.value,value:e.value},e.text)}))),i&&s.default.createElement(t.FormHelperText,{sx:{marginLeft:0,marginRight:0},error:i},u))},exports.FormSwitch=function(e){var o=e.id,r=e.label,a=e.checked;return s.default.createElement(t.FormControl,null,s.default.createElement(t.FormLabel,{component:"label"},r),s.default.createElement(t.FormControlLabel,{control:s.default.createElement(D,{id:o}),label:"".concat(a?"Active":"Inactive")}))},exports.Input=V,exports.Link=function(e){var o=e.children,r=v(e,["children"]);return s.default.createElement(t.Link,x({underline:"hover",variant:"caption",component:"span"},r),o)},exports.Radio=N,exports.Select=U,exports.Switch=D,exports.Typography=function(e){var t=e.children,o=v(e,["children"]);return s.default.createElement(p.default,x({},o),t)},exports.UpComponentsProvider=function(e){return s.default.createElement(s.default.Fragment,null,s.default.createElement(t.CssBaseline,null),s.default.createElement(r.ThemeProvider,{theme:q},e.children))},exports.theme=q,Object.keys(t).forEach((function(e){"default"===e||exports.hasOwnProperty(e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})}));

package/dist/cjs/types/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { LinkProps as MuiLinkProps } from '@mui/material';
-import { MUIGlobalOmit } from 'global/utils/types';
+import { MUIGlobalOmit } from '../../global/utils/types';
 export declare type LinkProps = MUIGlobalOmit<Omit<MuiLinkProps, 'underline' | 'variant' | 'component'>>;
 export declare const Link: ({ children, ...props }: LinkProps) => JSX.Element;

package/dist/cjs/types/stories/playground.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import '@codesandbox/sandpack-react/dist/index.css';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Playground: () => JSX.Element;

package/dist/esm/index.js

@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var j=function(){return j=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},j.apply(this,arguments)};function B(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(o[r[n]]=e[r[n]])}return o}var H={styleOverrides:{root:{fontSize:"12px",fontWeight:600,fontFamily:e.font.family.text,"& .MuiChip-icon":{width:"12px",height:"12px",marginLeft:e.size.spacing.scale8}},colorDefault:{backgroundColor:e.color.base.gray10,color:e.color.base.gray60},colorPrimary:{backgroundColor:e.color.base.indigo10,color:e.color.base.indigo80},colorSecondary:{backgroundColor:e.color.base.pink10,color:e.color.base.pink80},colorError:{backgroundColor:e.color.base.red10,color:e.color.base.red50},colorInfo:{backgroundColor:e.color.base.indigo10,color:e.color.base.indigo80},colorSuccess:{backgroundColor:e.color.base.green10,color:e.color.base.green80}}},I={h1:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.default,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.xlarge},h2:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.small,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.xlarge},h3:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.xsmall,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.large},body1:{fontFamily:e.font.family.text,fontSize:e.size.font.body.default,fontWeight:e.font.weight.normal,lineHeight:e.font.lineHeight.large},body2:{fontFamily:e.font.family.text,fontSize:e.size.font.body.default,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.large},caption:{fontFamily:e.font.family.text,fontSize:e.size.font.caption.default,fontWeight:e.font.weight.normal,lineHeight:e.font.lineHeight.medium},overline:{fontFamily:e.font.family.heading,fontSize:e.size.font.overline.default,letterSpacing:"initial",fontWeight:e.font.weight.bold,color:e.color.base.gray60}},L={small:"".concat(e.size.spacing.scale4," ").concat(e.size.spacing.scale8),medium:"".concat(e.size.spacing.scale8," ").concat(e.size.spacing.scale16),large:"".concat(e.size.spacing.scale16," ").concat(e.size.spacing.scale32)},R={styleOverrides:{root:{textTransform:"none",lineHeight:e.size.spacing.scale16,fontWeight:e.font.weight.bold,fontFamily:e.font.family.text},contained:{padding:L.medium},containedSizeSmall:{padding:L.small},containedSizeLarge:{padding:L.large},text:{padding:L.medium},textSizeSmall:{padding:L.small},textSizeLarge:{padding:L.large},outlined:{padding:"7px ".concat(e.size.spacing.scale16)},outlinedSizeSmall:{padding:L.small},outlinedSizeLarge:{padding:L.large},sizeSmall:{fontSize:e.size.font.label.default},sizeLarge:{fontSize:e.size.font.label.large},startIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}},endIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}}},defaultProps:{disableFocusRipple:!0},MuiIconButton:{root:{"&&:hover":{backgroundColor:"transparent"}}}},T={styleOverrides:{root:{color:e.color.base.gray60,backgroundColor:e.color.background.dark},sizeSmall:{padding:"3px"}}},$={styleOverrides:{root:{fontFamily:e.font.family.text,fontSize:e.size.font.label.default,fontWeight:e.font.weight.bold,width:e.size.spacing.scale24,height:e.size.spacing.scale24,"& .MuiSvgIcon-root":{width:e.size.spacing.scale16}},colorDefault:{backgroundColor:e.color.background.dark,"& .MuiSvgIcon-root":{color:e.color.base.gray60}}}},A={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:e.color.border.default,"& svg":{width:"16px",height:"16px"},"&&:hover":{backgroundColor:"transparent"}},colorPrimary:{"&$checked":{"&&:hover":{backgroundColor:"transparent"}}},colorSecondary:{"&$checked":{color:e.color.brand.darkMatter},"&$disabled":{opacity:.5}}}},q={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:e.color.border.default,"& svg":{width:"16px",height:"16px"},"&:hover":{background:"none"}}}},N={styleOverrides:{root:{marginRight:16},colorSecondary:{color:e.color.base.gray0,"&$checked":{color:e.color.base.gray0,left:2,"&:hover":{backgroundColor:"transparent"}},"&$disabled":{color:e.color.base.gray0}},track:{position:"absolute",width:48,height:24,borderRadius:12,opacity:1,left:"calc(50% - 48px/2)",top:"calc(50% - 24px/2)",backgroundColor:e.color.background.light,border:"2px solid ".concat(e.color.border.default),boxSizing:"border-box","$checked$checked + &":{opacity:1,backgroundColor:e.color.brand.darkMatter,border:"2px solid ".concat(e.color.brand.darkMatter)},"$disabled$disabled + &":{opacity:.5,cursor:"not-allowed"}},thumb:{boxShadow:"none"}}},D={styleOverrides:{outlined:{position:"relative",padding:e.size.spacing.scale8,fontSize:e.size.font.label.default,borderRadius:e.size.spacing.scale6,width:"100%","&.Mui-disabled":{backgroundColor:e.color.background.dark,color:e.color.text.light}}}},V={styleOverrides:{root:{input:{padding:e.size.spacing.scale8,fontSize:e.size.font.label.default,height:e.size.spacing.scale16},"& .MuiInputAdornment-root":{button:{padding:"0 ".concat(e.size.spacing.scale8," 0 0"),backgroundColor:"transparent"},svg:{width:e.size.spacing.scale16,height:e.size.spacing.scale16}}}}},G={styleOverrides:{outlined:{notchedOutline:{borderColor:e.color.border.default}},root:{underline:{"&:before":{borderBottom:"none"},"&:after":{borderBottom:"none"},"&:hover":{borderBottom:"none"},"&&:hover::before":{border:"none"}}}}};e.size.font.body.default,e.font.family.text,e.color.base.gray100;var U={styleOverrides:{textColorPrimary:{textTransform:"none",minWidth:"auto",fontWeight:700,marginRight:"".concat(e.size.spacing.scale16),fontFamily:e.font.family.text,color:e.color.base.gray60,padding:"0 0 ".concat(e.size.spacing.scale16," 0"),"&:hover":{color:e.color.brand.darkMatter,opacity:1},"&$selected":{color:e.color.brand.darkMatter},"&:focus":{color:e.color.brand.darkMatter}}},defaultProps:{disableRipple:!0}};e.size.font.caption.default;var J,K,Q,X={styleOverrides:{root:{borderBottom:"1px solid ".concat(e.color.base.gray20)},indicator:{backgroundColor:e.color.brand.darkMatter}}},Y={styleOverrides:{root:{fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.medium,fontFamily:e.font.family.text,fontSize:e.size.font.caption.default,color:e.color.text.base,marginBottom:e.size.spacing.scale8}}},Z=t({typography:j({},I),palette:{background:{default:"#ffffff"},primary:{main:e.color.brand.darkMatter},secondary:{main:e.color.brand.titanPink},error:{main:e.color.utility.danger},info:{main:e.color.utility.info},success:{main:e.color.base.green60}},components:{MuiButton:R,MuiButtonBase:{defaultProps:{disableRipple:!0,disableTouchRipple:!0}},MuiContainer:{styleOverrides:{maxWidthLg:{"@media (min-width: 1280px)":{maxWidth:"1185px"}}}},MuiIconButton:T,MuiChip:H,MuiInput:G,MuiTextField:V,MuiFormLabel:Y,MuiTabs:X,MuiTab:U,MuiAvatar:$,MuiCheckbox:A,MuiRadio:q,MuiSwitch:N,MuiSelect:D,MuiLink:{styleOverrides:{root:{cursor:"pointer"}}},MuiDivider:{styleOverrides:{root:{margin:"16px 0"}}},MuiFormControl:{styleOverrides:{root:{width:"100%"}}}}}),_=function(e){return k.createElement(k.Fragment,null,k.createElement(o,null),k.createElement(S,{theme:Z},e.children))},ee=w(r)(Q||(J=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],K=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],Object.defineProperty?Object.defineProperty(J,"raw",{value:K}):J.raw=K,Q=J)),te=function(e){var t=e.color,o=void 0===t?"primary":t,r=e.variant,n=void 0===r?"contained":r,i=e.size,a=void 0===i?"medium":i,l=e.loading,c=e.children,d=B(e,["color","variant","size","loading","children"]);return k.createElement(O,j({size:a,variant:n,color:o,disabled:l},d),k.createElement("span",{style:{opacity:l?0:1}},c),l&&k.createElement(ee,{size:20,color:"inherit"}))},oe=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(C,j({},o),t)},re=function(e){var t=e.label,o=B(e,["label"]);return k.createElement(n,j({size:"small",label:t},o))},ne=function(t){var o=t.icon,r=t.firstName,n=void 0===r?"":r,a=t.lastName,l=void 0===a?"":a,c=B(t,["icon","firstName","lastName"]),d="".concat(n.substring(0,1)).concat(l.substring(0,1)).toLocaleUpperCase(),s=d?e.color.brand.titanPink:e.color.background.dark;return k.createElement(i,j({sx:j({backgroundColor:s},c.sx)},c),d||o)},ie={small:6,medium:8,large:12,fluid:12},ae=function(e){var t=e.component,o=void 0===t?"div":t,r=e.size,n=void 0===r?"large":r,i=e.children,c=B(e,["component","size","children"]),d="fluid"===n;return k.createElement(a,j({component:o,disableGutters:d,maxWidth:!d&&"lg",sx:j({display:"flex",justifyContent:"center"},c.sx)},c),k.createElement(l,{container:!0,justifyContent:"center"},k.createElement(l,{item:!0,md:ie[n]},i)))},le=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(c,j({},o),t)},ce=function(e){var t=B(e,[]);return k.createElement(d,j({},t))},de=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.data,a=t.label,l=t.error,d=t.helperText;return k.createElement(s,null,k.createElement(m,{component:"label",error:l},a," ",n?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(g,null,i.map((function(t,r){var n=t.value,i=t.label;return k.createElement(u,{key:r,value:n,label:i||"",sx:{fontSize:e.size.font.base,color:e.color.text.base},control:k.createElement(ce,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),l&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:l},d))},se=function(e){return k.createElement(p,j({},e))},me=function(t){var o=t.id,r=t.helperText,n=t.label,i=t.error,a=t.required,l=void 0===a||a,d=t.name,g=t.data;return k.createElement(s,{component:"fieldset",error:i},k.createElement(m,{component:"legend"},n," ",l?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(h,{"aria-label":d,name:d},g.map((function(t,r){var n=t.value,i=t.label;return k.createElement(u,{value:n,key:n,label:i||"",sx:{fontSize:e.size.font.base,color:e.color.text.base},control:k.createElement(se,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),i&&k.createElement(f,{sx:{marginLeft:0,marginRight:0}},r))},ge=function(e){return k.createElement(b,j({},e))},ue=function(e){var t=e.id,o=e.label,r=e.checked;return k.createElement(s,null,k.createElement(m,{component:"label"},o),k.createElement(u,{control:k.createElement(ge,{id:t}),label:"".concat(r?"Active":"Inactive")}))},fe=function(e){return k.createElement(y,j({variant:"outlined"},e))},pe=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.options,a=t.label,l=t.error,d=t.placeholder,g=t.helperText;return k.createElement(s,null,k.createElement(m,{component:"label",error:l},a," ",n?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(fe,{id:o,placeholder:d,error:l},i.map((function(e){return k.createElement(v,{key:e.value,value:e.value},e.text)}))),l&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:l},g))},he=function(e){var t=e.type,o=B(e,["type"]),r=E(!1),n=r[0],i=r[1],a=j(j({},o.InputProps),"password"===t&&{endAdornment:k.createElement(M,{position:"end"},k.createElement(W,{"aria-label":"toggle password visibility",onClick:function(){return i(!n)},edge:"end"},n?k.createElement(P,null):k.createElement(F,null)))});return k.createElement(x,j({},o,{type:n?"text":t,InputProps:a}))},be=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.label,a=t.error,l=t.helperText,d=B(t,["id","required","label","error","helperText"]);return k.createElement(s,null,k.createElement(m,{component:"label",error:a},i," ",!n&&k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(he,j({},d,{id:o,error:a,inputProps:{"data-testid":o}})),a&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:a},l))},ye=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(z,j({underline:"hover",variant:"caption",component:"span"},o),t)};export{ne as Avatar,le as Box,te as Button,ce as Checkbox,re as Chip,ae as Container,de as FormCheckbox,be as FormInput,me as FormRadio,pe as FormSelect,ue as FormSwitch,he as Input,ye as Link,se as Radio,fe as Select,ge as Switch,oe as Typography,_ as UpComponentsProvider,Z as theme};
+***************************************************************************** */var j=function(){return j=Object.assign||function(e){for(var t,o=1,r=arguments.length;o<r;o++)for(var n in t=arguments[o])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},j.apply(this,arguments)};function B(e,t){var o={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(o[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(r=Object.getOwnPropertySymbols(e);n<r.length;n++)t.indexOf(r[n])<0&&Object.prototype.propertyIsEnumerable.call(e,r[n])&&(o[r[n]]=e[r[n]])}return o}var H={styleOverrides:{root:{fontSize:"12px",fontWeight:600,fontFamily:e.font.family.text,"& .MuiChip-icon":{width:"12px",height:"12px",marginLeft:e.size.spacing.scale8}},colorDefault:{backgroundColor:e.color.gray10,color:e.color.gray60},colorPrimary:{backgroundColor:e.color.indigo10,color:e.color.indigo80},colorSecondary:{backgroundColor:e.color.pink10,color:e.color.pink80},colorError:{backgroundColor:e.color.red10,color:e.color.red50},colorInfo:{backgroundColor:e.color.indigo10,color:e.color.indigo80},colorSuccess:{backgroundColor:e.color.green10,color:e.color.green80}}},I={h1:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.default,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.xlarge},h2:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.small,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.xlarge},h3:{fontFamily:e.font.family.heading,fontSize:e.size.font.heading.xsmall,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.large},body1:{fontFamily:e.font.family.text,fontSize:e.size.font.body.default,fontWeight:e.font.weight.normal,lineHeight:e.font.lineHeight.large},body2:{fontFamily:e.font.family.text,fontSize:e.size.font.body.default,fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.large},caption:{fontFamily:e.font.family.text,fontSize:e.size.font.caption.default,fontWeight:e.font.weight.normal,lineHeight:e.font.lineHeight.medium},overline:{fontFamily:e.font.family.heading,fontSize:e.size.font.overline.default,letterSpacing:"initial",fontWeight:e.font.weight.bold,color:e.color.gray60}},L={small:"".concat(e.size.spacing.scale4," ").concat(e.size.spacing.scale8),medium:"".concat(e.size.spacing.scale8," ").concat(e.size.spacing.scale16),large:"".concat(e.size.spacing.scale16," ").concat(e.size.spacing.scale32)},R={styleOverrides:{root:{textTransform:"none",lineHeight:e.size.spacing.scale16,fontWeight:e.font.weight.bold,fontFamily:e.font.family.text},contained:{padding:L.medium},containedSizeSmall:{padding:L.small},containedSizeLarge:{padding:L.large},text:{padding:L.medium},textSizeSmall:{padding:L.small},textSizeLarge:{padding:L.large},outlined:{padding:"7px ".concat(e.size.spacing.scale16)},outlinedSizeSmall:{padding:L.small},outlinedSizeLarge:{padding:L.large},sizeSmall:{fontSize:e.size.font.label.default},sizeLarge:{fontSize:e.size.font.label.large},startIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}},endIcon:{"& svg":{fill:"currentColor",width:"12px",height:"12px"}}},defaultProps:{disableFocusRipple:!0},MuiIconButton:{root:{"&&:hover":{backgroundColor:"transparent"}}}},T={styleOverrides:{root:{color:e.color.gray60,backgroundColor:e.color.background.dark},sizeSmall:{padding:"3px"}}},$={styleOverrides:{root:{fontFamily:e.font.family.text,fontSize:e.size.font.label.default,fontWeight:e.font.weight.bold,width:e.size.spacing.scale24,height:e.size.spacing.scale24,"& .MuiSvgIcon-root":{width:e.size.spacing.scale16}},colorDefault:{backgroundColor:e.color.background.dark,"& .MuiSvgIcon-root":{color:e.color.gray60}}}},A={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:e.color.border.default,"& svg":{width:"16px",height:"16px"},"&&:hover":{backgroundColor:"transparent"}},colorPrimary:{"&$checked":{"&&:hover":{backgroundColor:"transparent"}}},colorSecondary:{"&$checked":{color:e.color.brand.darkMatter},"&$disabled":{opacity:.5}}}},q={styleOverrides:{root:{paddingTop:4,paddingBottom:4,color:e.color.border.default,"& svg":{width:"16px",height:"16px"},"&:hover":{background:"none"}}}},N={styleOverrides:{root:{marginRight:16},colorSecondary:{color:e.color.gray0,"&$checked":{color:e.color.gray0,left:2,"&:hover":{backgroundColor:"transparent"}},"&$disabled":{color:e.color.gray0}},track:{position:"absolute",width:48,height:24,borderRadius:12,opacity:1,left:"calc(50% - 48px/2)",top:"calc(50% - 24px/2)",backgroundColor:e.color.background.light,border:"2px solid ".concat(e.color.border.default),boxSizing:"border-box","$checked$checked + &":{opacity:1,backgroundColor:e.color.brand.darkMatter,border:"2px solid ".concat(e.color.brand.darkMatter)},"$disabled$disabled + &":{opacity:.5,cursor:"not-allowed"}},thumb:{boxShadow:"none"}}},D={styleOverrides:{outlined:{position:"relative",padding:e.size.spacing.scale8,fontSize:e.size.font.label.default,borderRadius:e.size.spacing.scale6,width:"100%","&.Mui-disabled":{backgroundColor:e.color.background.dark,color:e.color.text.light}}}},V={styleOverrides:{root:{input:{padding:e.size.spacing.scale8,fontSize:e.size.font.label.default,height:e.size.spacing.scale16},"& .MuiInputAdornment-root":{button:{padding:"0 ".concat(e.size.spacing.scale8," 0 0"),backgroundColor:"transparent"},svg:{width:e.size.spacing.scale16,height:e.size.spacing.scale16}}}}},G={styleOverrides:{outlined:{notchedOutline:{borderColor:e.color.border.default}},root:{underline:{"&:before":{borderBottom:"none"},"&:after":{borderBottom:"none"},"&:hover":{borderBottom:"none"},"&&:hover::before":{border:"none"}}}}};e.size.font.body.default,e.font.family.text,e.color.gray100;var U={styleOverrides:{textColorPrimary:{textTransform:"none",minWidth:"auto",fontWeight:700,marginRight:"".concat(e.size.spacing.scale16),fontFamily:e.font.family.text,color:e.color.gray60,padding:"0 0 ".concat(e.size.spacing.scale16," 0"),"&:hover":{color:e.color.brand.darkMatter,opacity:1},"&$selected":{color:e.color.brand.darkMatter},"&:focus":{color:e.color.brand.darkMatter}}},defaultProps:{disableRipple:!0}};e.size.font.caption.default;var J,K,Q,X={styleOverrides:{root:{borderBottom:"1px solid ".concat(e.color.gray20)},indicator:{backgroundColor:e.color.brand.darkMatter}}},Y={styleOverrides:{root:{fontWeight:e.font.weight.bold,lineHeight:e.font.lineHeight.medium,fontFamily:e.font.family.text,fontSize:e.size.font.caption.default,color:e.color.text.base,marginBottom:e.size.spacing.scale8}}},Z=t({typography:j({},I),palette:{background:{default:"#ffffff"},primary:{main:e.color.brand.darkMatter},secondary:{main:e.color.brand.titanPink},error:{main:e.color.utility.danger},info:{main:e.color.utility.info},success:{main:e.color.green60}},components:{MuiButton:R,MuiButtonBase:{defaultProps:{disableRipple:!0,disableTouchRipple:!0}},MuiContainer:{styleOverrides:{maxWidthLg:{"@media (min-width: 1280px)":{maxWidth:"1185px"}}}},MuiIconButton:T,MuiChip:H,MuiInput:G,MuiTextField:V,MuiFormLabel:Y,MuiTabs:X,MuiTab:U,MuiAvatar:$,MuiCheckbox:A,MuiRadio:q,MuiSwitch:N,MuiSelect:D,MuiLink:{styleOverrides:{root:{cursor:"pointer"}}},MuiDivider:{styleOverrides:{root:{margin:"16px 0"}}},MuiFormControl:{styleOverrides:{root:{width:"100%"}}}}}),_=function(e){return k.createElement(k.Fragment,null,k.createElement(o,null),k.createElement(S,{theme:Z},e.children))},ee=w(r)(Q||(J=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],K=["\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"],Object.defineProperty?Object.defineProperty(J,"raw",{value:K}):J.raw=K,Q=J)),te=function(e){var t=e.color,o=void 0===t?"primary":t,r=e.variant,n=void 0===r?"contained":r,i=e.size,a=void 0===i?"medium":i,l=e.loading,c=e.children,d=B(e,["color","variant","size","loading","children"]);return k.createElement(O,j({size:a,variant:n,color:o,disabled:l},d),k.createElement("span",{style:{opacity:l?0:1}},c),l&&k.createElement(ee,{size:20,color:"inherit"}))},oe=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(C,j({},o),t)},re=function(e){var t=e.label,o=B(e,["label"]);return k.createElement(n,j({size:"small",label:t},o))},ne=function(t){var o=t.icon,r=t.firstName,n=void 0===r?"":r,a=t.lastName,l=void 0===a?"":a,c=B(t,["icon","firstName","lastName"]),d="".concat(n.substring(0,1)).concat(l.substring(0,1)).toLocaleUpperCase(),s=d?e.color.brand.titanPink:e.color.background.dark;return k.createElement(i,j({sx:j({backgroundColor:s},c.sx)},c),d||o)},ie={small:6,medium:8,large:12,fluid:12},ae=function(e){var t=e.component,o=void 0===t?"div":t,r=e.size,n=void 0===r?"large":r,i=e.children,c=B(e,["component","size","children"]),d="fluid"===n;return k.createElement(a,j({component:o,disableGutters:d,maxWidth:!d&&"lg",sx:j({display:"flex",justifyContent:"center"},c.sx)},c),k.createElement(l,{container:!0,justifyContent:"center"},k.createElement(l,{item:!0,md:ie[n]},i)))},le=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(c,j({},o),t)},ce=function(e){var t=B(e,[]);return k.createElement(d,j({},t))},de=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.data,a=t.label,l=t.error,d=t.helperText;return k.createElement(s,null,k.createElement(m,{component:"label",error:l},a," ",n?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(g,null,i.map((function(t,r){var n=t.value,i=t.label;return k.createElement(u,{key:r,value:n,label:i||"",sx:{fontSize:e.size.font.base,color:e.color.text.base},control:k.createElement(ce,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),l&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:l},d))},se=function(e){return k.createElement(p,j({},e))},me=function(t){var o=t.id,r=t.helperText,n=t.label,i=t.error,a=t.required,l=void 0===a||a,d=t.name,g=t.data;return k.createElement(s,{component:"fieldset",error:i},k.createElement(m,{component:"legend"},n," ",l?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(h,{"aria-label":d,name:d},g.map((function(t,r){var n=t.value,i=t.label;return k.createElement(u,{value:n,key:n,label:i||"",sx:{fontSize:e.size.font.base,color:e.color.text.base},control:k.createElement(se,{color:"primary",inputProps:{"data-testid":"".concat(o,"-").concat(r)}})})}))),i&&k.createElement(f,{sx:{marginLeft:0,marginRight:0}},r))},ge=function(e){return k.createElement(b,j({},e))},ue=function(e){var t=e.id,o=e.label,r=e.checked;return k.createElement(s,null,k.createElement(m,{component:"label"},o),k.createElement(u,{control:k.createElement(ge,{id:t}),label:"".concat(r?"Active":"Inactive")}))},fe=function(e){return k.createElement(y,j({variant:"outlined"},e))},pe=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.options,a=t.label,l=t.error,d=t.placeholder,g=t.helperText;return k.createElement(s,null,k.createElement(m,{component:"label",error:l},a," ",n?"":k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(fe,{id:o,placeholder:d,error:l},i.map((function(e){return k.createElement(v,{key:e.value,value:e.value},e.text)}))),l&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:l},g))},he=function(e){var t=e.type,o=B(e,["type"]),r=E(!1),n=r[0],i=r[1],a=j(j({},o.InputProps),"password"===t&&{endAdornment:k.createElement(M,{position:"end"},k.createElement(W,{"aria-label":"toggle password visibility",onClick:function(){return i(!n)},edge:"end"},n?k.createElement(P,null):k.createElement(F,null)))});return k.createElement(x,j({},o,{type:n?"text":t,InputProps:a}))},be=function(t){var o=t.id,r=t.required,n=void 0===r||r,i=t.label,a=t.error,l=t.helperText,d=B(t,["id","required","label","error","helperText"]);return k.createElement(s,null,k.createElement(m,{component:"label",error:a},i," ",!n&&k.createElement(c,{component:"span",sx:{fontWeight:e.font.weight.normal,color:e.color.text.light}},"(optional)")),k.createElement(he,j({},d,{id:o,error:a,inputProps:{"data-testid":o}})),a&&k.createElement(f,{sx:{marginLeft:0,marginRight:0},error:a},l))},ye=function(e){var t=e.children,o=B(e,["children"]);return k.createElement(z,j({underline:"hover",variant:"caption",component:"span"},o),t)};export{ne as Avatar,le as Box,te as Button,ce as Checkbox,re as Chip,ae as Container,de as FormCheckbox,be as FormInput,me as FormRadio,pe as FormSelect,ue as FormSwitch,he as Input,ye as Link,se as Radio,fe as Select,ge as Switch,oe as Typography,_ as UpComponentsProvider,Z as theme};

package/dist/esm/types/components/Link/Link.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { LinkProps as MuiLinkProps } from '@mui/material';
-import { MUIGlobalOmit } from 'global/utils/types';
+import { MUIGlobalOmit } from '../../global/utils/types';
 export declare type LinkProps = MUIGlobalOmit<Omit<MuiLinkProps, 'underline' | 'variant' | 'component'>>;
 export declare const Link: ({ children, ...props }: LinkProps) => JSX.Element;

package/dist/esm/types/stories/playground.stories.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Meta } from '@storybook/react';
+import '@codesandbox/sandpack-react/dist/index.css';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Playground: () => JSX.Element;

package/dist/index.d.ts

@@ -7,7 +7,6 @@ import { ThemeProviderProps } from '@mui/material/styles/ThemeProvider';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import React, { HTMLInputTypeAttribute } from 'react';
 import { TypographyProps as TypographyProps$1 } from '@mui/material/Typography';
-import { MUIGlobalOmit as MUIGlobalOmit$1 } from 'global/utils/types';
 
 declare const UpComponentsProvider: (props: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
 
@@ -130,7 +129,7 @@ declare type FormInputProps = MUIGlobalOmit<InputProps, {
 }>;
 declare const FormInput: ({ id, required, label, error, helperText, ...props }: FormInputProps) => JSX.Element;
 
-declare type LinkProps = MUIGlobalOmit$1<Omit<LinkProps$1, 'underline' | 'variant' | 'component'>>;
+declare type LinkProps = MUIGlobalOmit<Omit<LinkProps$1, 'underline' | 'variant' | 'component'>>;
 declare const Link: ({ children, ...props }: LinkProps) => JSX.Element;
 
 export { Avatar, Box, Button, Checkbox, Chip, Container, FormCheckbox, FormInput, FormRadio, FormSelect, FormSwitch, Input, Link, Radio, Select, Switch, Typography, UpComponentsProvider, theme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up42/up-components",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "UP42 Component Library",
   "author": "Axel Fuhrmann axel.fuhrmann@up42.com",
   "license": "ISC",
@@ -28,6 +28,7 @@
     "@babel/preset-env": "^7.16.10",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
+    "@codesandbox/sandpack-react": "^0.14.3",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
     "@emotion/jest": "^11.7.1",
@@ -51,7 +52,7 @@
     "@types/react": "^17.0.38",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
-    "@up42/design-system-tokens": "^1.0.1",
+    "@up42/design-system-tokens": "^1.2.0",
     "babel-jest": "^27.4.6",
     "babel-loader": "^8.2.3",
     "eslint": "^8.7.0",
@@ -78,9 +79,9 @@
   "peerDependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@mui/material": "^5.3.0",
     "@mui/icons-material": "^5.3.0",
-    "@up42/design-system-tokens": "^1.0.1",
+    "@mui/material": "^5.3.0",
+    "@up42/design-system-tokens": "^1.2.0",
     "react": "^17.0.2"
   },
   "lint-staged": {