@gsretail.com/gui-core/build/core/Section/PagePanel/shared/PanelField/PanelFieldView.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n,__rest as t,__assign as i}from"../../../../../node_modules/tslib/tslib.es6.js";import e from"react";import l from"@emotion/styled";import{Grid as a,Box as o,Typography as r}from"@mui/material";import"@mui/material/styles";import d from"../../../../../assets/theme/basicStyle.js";var m,h,p,s=l(a)(m||(m=n(["\n  width: ",";\n  align-items: flex-start;\n\n  .MuiButtonBase-root,\n  .MuiButtonBase-root.MuiIconButton-root {\n    box-shadow: none !important;\n\n    &:hover {\n      box-shadow: none !important;\n    }\n  }\n\n  @media (max-width: ","px) {\n    > .MuiGrid-root {\n      width: 100% !important;\n    }\n  }\n"],["\n  width: ",";\n  align-items: flex-start;\n\n  .MuiButtonBase-root,\n  .MuiButtonBase-root.MuiIconButton-root {\n    box-shadow: none !important;\n\n    &:hover {\n      box-shadow: none !important;\n    }\n  }\n\n  @media (max-width: ","px) {\n    > .MuiGrid-root {\n      width: 100% !important;\n    }\n  }\n"])),(function(n){return n.fullWidth&&"100%"}),(function(n){return n.theme.breakpoints.values.lg})),u=l(o)(h||(h=n(["\n  display: flex;\n  align-items: baseline;\n  flex-shrink: 0;\n  // min-width: ","px;\n  // max-width: ","px;\n  width: 100%;\n  min-height: 24px;\n  margin-right: 8px;\n  // margin-top: ","px;\n"],["\n  display: flex;\n  align-items: baseline;\n  flex-shrink: 0;\n  // min-width: ","px;\n  // max-width: ","px;\n  width: 100%;\n  min-height: 24px;\n  margin-right: 8px;\n  // margin-top: ","px;\n"])),(function(n){return n.labelMinWidth||d.panel.label.minWidth}),(function(n){return n.labelMaxWidth||d.panel.label.maxWidth}),d.panel.label.marginTop),x=l(r)(p||(p=n(["\n  width: 100%;\n  // padding: 3px 0 0 0;\n  line-height: 1.9;\n  color: ",";\n  font-weight: ",";\n  font-size: ",";\n  word-break: break-all;\n\n  & > .MuiTypography-root {\n    display: inline-block;\n    padding-left: 1px;\n    font-weight: 700;\n    color: ",";\n  }\n\n  @media (max-width: ","px) {\n    text-align: left;\n  }\n  // display: inline-flex;\n"],["\n  width: 100%;\n  // padding: 3px 0 0 0;\n  line-height: 1.9;\n  color: ",";\n  font-weight: ",";\n  font-size: ",";\n  word-break: break-all;\n\n  & > .MuiTypography-root {\n    display: inline-block;\n    padding-left: 1px;\n    font-weight: 700;\n    color: ",";\n  }\n\n  @media (max-width: ","px) {\n    text-align: left;\n  }\n  // display: inline-flex;\n"])),d.color.black,(function(n){return n.theme.typography.fontWeightMedium}),d.font.size[13],(function(n){return n.theme.palette.red.main}),(function(n){return n.theme.breakpoints.values.sm})),f=function(n){var l=n.label,a=n.labelStartIcon,o=n.labelEndIcon,d=n.labelMinWidth,m=n.labelMaxWidth,h=n.textAlign,p=n.required;n.fullWidth;var f=n.columnSize;n.container;var c=n.children,g=t(n,["label","labelStartIcon","labelEndIcon","labelMinWidth","labelMaxWidth","textAlign","required","fullWidth","columnSize","container","children"]),b=f,w=f<6?4:6;return e.createElement(s,i({item:!0,wrap:"nowrap",container:!!l},g,{lg:b,md:w,sm:6,xs:6,fullWidth:!0}),l&&e.createElement(u,{className:"fieldLabelWrap",style:{minWidth:d,maxWidth:m}},a,e.createElement(x,{className:"fieldLabel",sx:{textAlign:h}},l,p?e.createElement(r,null,"*"):null),o),c)};f.defaultProps={textAlign:"right",fullWidth:!0};export{f as default};