@pautena/react-design-system 0.14.0 → 0.14.1

package/enhanced-table/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/enhanced-table",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/enhanced-table/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/enhanced-table",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/expandable-alert/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("@mui/icons-material/ExpandMore"),a=require("@mui/icons-material/ExpandLess"),o=require("@mui/icons-material/Close"),r=require("react"),n=require("@mui/material/colors"),l=require("markdown-to-jsx"),i=require("@mui/icons-material/ContentCopy");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=p(t),u=p(a),s=p(o),m=p(r),d=p(l),f=p(i);const y={overrides:{h1:{component:e.Typography,props:{gutterBottom:!0,variant:"h5"}},h2:{component:e.Typography,props:{gutterBottom:!0,variant:"h6"}},h3:{component:e.Typography,props:{gutterBottom:!0,variant:"subtitle1"}},h4:{component:e.Typography,props:{gutterBottom:!0,variant:"caption",paragraph:!0}},p:{component:e.Typography,props:{paragraph:!0}},a:{component:e.Link},li:{component:"li"}}},x=({content:e,options:t=y})=>m.default.createElement(d.default,{options:t},e),h=({markdown:t,content:a,spacing:o=0,children:r,sx:l})=>{const{spacing:i,typography:p}=e.useTheme();let c,u;t?c=t||"":Array.isArray(a)?(u=a.map(((t,a)=>m.default.createElement(e.Typography,{key:a,sx:{pb:o}},t))),c=a.join("\n")):(u=m.default.createElement(e.Typography,null,a),c=a||"");const s=t&&m.default.createElement(x,{content:t});return m.default.createElement(e.Paper,{sx:{position:"relative",pl:2,pr:4,py:1,backgroundColor:n.blueGrey[800],color:"white",...l}},m.default.createElement(e.Box,{display:"flex",flexDirection:"row"},m.default.createElement(e.Box,{width:1},r||s||u),m.default.createElement(e.Box,{sx:{position:"absolute",top:i(.5),right:i(.5)}},c&&m.default.createElement(e.IconButton,{"aria-label":"copy board content",color:"inherit",onClick:()=>navigator.clipboard.writeText(c)},m.default.createElement(e.Tooltip,{title:"Copy"},m.default.createElement(f.default,{sx:{fontSize:p.pxToRem(18)}}))))))},E={[`& .${e.alertClasses.message}`]:{width:1}},g=r.forwardRef((({severity:t,iconMapping:a,title:o,message:n,metadata:l,metadataComponent:i,onClose:p,sx:d={}},f)=>{const[y,x]=r.useState(!1);return m.default.createElement(e.Alert,{ref:f,severity:t,iconMapping:a,onClose:p,action:m.default.createElement(e.Box,{display:"flex",flexDirection:"column"},m.default.createElement(e.IconButton,{color:"inherit",onClick:p},m.default.createElement(s.default,{fontSize:"small"})),l&&m.default.createElement(e.IconButton,{color:"inherit",onClick:()=>x((e=>!e))},y?m.default.createElement(u.default,{fontSize:"small"}):m.default.createElement(c.default,{fontSize:"small"}))),sx:{...E,...d}},m.default.createElement(e.Box,{sx:{w:1}},o&&m.default.createElement(e.AlertTitle,null,o),n,l&&m.default.createElement(e.Collapse,{in:y,sx:{mt:2}},m.default.createElement(h,{content:l},i))))}));exports.ExpandableAlert=g;
+//# sourceMappingURL=index.js.map

package/expandable-alert/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/markdown/markdown.tsx","../../../src/board/board.tsx","../../../src/expandable-alert/expandable-alert.tsx"],"sourcesContent":["import { Typography, Link } from \"@mui/material\";\nimport React from \"react\";\nimport ReactMarkdown, { MarkdownToJSX } from \"markdown-to-jsx\";\n\nexport interface MarkdownProps {\n  content: string;\n  options?: MarkdownToJSX.Options;\n}\n\nexport const markdownDefaultOptions: MarkdownToJSX.Options = {\n  overrides: {\n    h1: {\n      component: Typography,\n      props: {\n        gutterBottom: true,\n        variant: \"h5\",\n      },\n    },\n    h2: { component: Typography, props: { gutterBottom: true, variant: \"h6\" } },\n    h3: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"subtitle1\" },\n    },\n    h4: {\n      component: Typography,\n      props: { gutterBottom: true, variant: \"caption\", paragraph: true },\n    },\n    p: { component: Typography, props: { paragraph: true } },\n    a: { component: Link },\n    li: {\n      component: \"li\",\n    },\n  },\n};\n\nexport const Markdown = ({ content, options = markdownDefaultOptions }: MarkdownProps) => {\n  return <ReactMarkdown options={options}>{content}</ReactMarkdown>;\n};\n","import {\n  Box,\n  IconButton,\n  Paper,\n  SxProps,\n  Theme,\n  Tooltip,\n  Typography,\n  useTheme,\n} from \"@mui/material\";\nimport { blueGrey } from \"@mui/material/colors\";\nimport React, { PropsWithChildren, ReactNode } from \"react\";\nimport { Markdown } from \"../markdown\";\nimport ContentCopyIcon from \"@mui/icons-material/ContentCopy\";\n\nexport type BoardProps = PropsWithChildren<{\n  markdown?: string;\n  content?: string | string[];\n  spacing?: 0 | 1 | 2 | 3 | 4 | 5;\n  sx?: SxProps<Theme>;\n}>;\n\nexport const Board = ({\n  markdown: markdownProps,\n  content: contentProp,\n  spacing = 0,\n  children,\n  sx,\n}: BoardProps) => {\n  const { spacing: themeSpacing, typography } = useTheme();\n  let copyContent: string;\n  let content: ReactNode;\n\n  if (markdownProps) {\n    copyContent = markdownProps || \"\";\n  } else if (Array.isArray(contentProp)) {\n    content = contentProp.map((line, i) => (\n      <Typography key={i} sx={{ pb: spacing }}>\n        {line}\n      </Typography>\n    ));\n    copyContent = contentProp.join(\"\\n\");\n  } else {\n    content = <Typography>{contentProp}</Typography>;\n    copyContent = contentProp || \"\";\n  }\n\n  const markdown = markdownProps && <Markdown content={markdownProps} />;\n\n  return (\n    <Paper\n      sx={{\n        position: \"relative\",\n        pl: 2,\n        pr: 4,\n        py: 1,\n        backgroundColor: blueGrey[800],\n        color: \"white\",\n        ...sx,\n      }}\n    >\n      <Box display=\"flex\" flexDirection=\"row\">\n        <Box width={1}>{children || markdown || content}</Box>\n        <Box sx={{ position: \"absolute\", top: themeSpacing(0.5), right: themeSpacing(0.5) }}>\n          {copyContent && (\n            <IconButton\n              aria-label=\"copy board content\"\n              color=\"inherit\"\n              onClick={() => navigator.clipboard.writeText(copyContent)}\n            >\n              <Tooltip title=\"Copy\">\n                <ContentCopyIcon sx={{ fontSize: typography.pxToRem(18) }} />\n              </Tooltip>\n            </IconButton>\n          )}\n        </Box>\n      </Box>\n    </Paper>\n  );\n};\n","import {\n  Alert,\n  alertClasses,\n  AlertColor,\n  AlertTitle,\n  Box,\n  Collapse,\n  IconButton,\n  SxProps,\n  Theme,\n} from \"@mui/material\";\nimport ExpandMoreIcon from \"@mui/icons-material/ExpandMore\";\nimport ExpandLessIcon from \"@mui/icons-material/ExpandLess\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport { forwardRef, ReactElement, useState } from \"react\";\nimport React from \"react\";\nimport { Board } from \"~/board\";\n\nexport interface ExpandableAlertProps {\n  severity: AlertColor;\n  iconMapping?: Partial<Record<AlertColor, React.ReactNode>>;\n  title?: string;\n  message: string;\n  metadata?: string | string[];\n  metadataComponent?: ReactElement;\n  onClose: () => void;\n  sx?: SxProps<Theme>;\n}\n\nconst alertSx = {\n  [`& .${alertClasses.message}`]: {\n    width: 1,\n  },\n};\n\nexport const ExpandableAlert = forwardRef<any, ExpandableAlertProps>(\n  (\n    { severity, iconMapping, title, message, metadata, metadataComponent, onClose, sx = {} },\n    ref,\n  ) => {\n    const [expanded, setExpanded] = useState(false);\n    return (\n      <Alert\n        ref={ref}\n        severity={severity}\n        iconMapping={iconMapping}\n        onClose={onClose}\n        action={\n          <Box display=\"flex\" flexDirection=\"column\">\n            <IconButton color=\"inherit\" onClick={onClose}>\n              <CloseIcon fontSize=\"small\" />\n            </IconButton>\n            {metadata && (\n              <IconButton color=\"inherit\" onClick={() => setExpanded((e) => !e)}>\n                {expanded ? (\n                  <ExpandLessIcon fontSize=\"small\" />\n                ) : (\n                  <ExpandMoreIcon fontSize=\"small\" />\n                )}\n              </IconButton>\n            )}\n          </Box>\n        }\n        sx={{ ...alertSx, ...sx }}\n      >\n        <Box sx={{ w: 1 }}>\n          {title && <AlertTitle>{title}</AlertTitle>}\n          {message}\n          {metadata && (\n            <Collapse in={expanded} sx={{ mt: 2 }}>\n              <Board content={metadata}>{metadataComponent}</Board>\n            </Collapse>\n          )}\n        </Box>\n      </Alert>\n    );\n  },\n);\n"],"names":["markdownDefaultOptions","overrides","h1","component","Typography","props","gutterBottom","variant","h2","h3","h4","paragraph","p","a","Link","li","Markdown","content","options","React","createElement","ReactMarkdown","Board","markdown","markdownProps","contentProp","spacing","children","sx","themeSpacing","typography","useTheme","copyContent","Array","isArray","map","line","i","key","pb","join","Paper","position","pl","pr","py","backgroundColor","blueGrey","color","Box","display","flexDirection","width","top","right","IconButton","onClick","navigator","clipboard","writeText","Tooltip","title","ContentCopyIcon","fontSize","pxToRem","alertSx","alertClasses","message","ExpandableAlert","forwardRef","severity","iconMapping","metadata","metadataComponent","onClose","ref","expanded","setExpanded","useState","Alert","action","CloseIcon","e","ExpandLessIcon","ExpandMoreIcon","w","AlertTitle","Collapse","in","mt"],"mappings":"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"}

package/expandable-alert/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/expandable-alert",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "markdown-to-jsx": "^7.2.1",
+    "react": "^18.2.0"
+  }
+}

package/expandable-alert/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/expandable-alert",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/form-dialog/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("@mui/lab"),l=require("@mui/icons-material/Close"),a=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(l),c=n(a);const r=({open:l,title:a,component:n,componentProps:r={},disabled:i,disableAccept:u,disableCancel:d,actions:s=[],children:p,loading:m,cancelable:b,callCloseWhenCancel:f=!0,acceptable:C,acceptText:g="Accept",cancelText:x="Cancel",onAccept:E,onCancel:y=(()=>null),onClose:T,acceptType:h="button"})=>{const D=s.length>0||C||b;return c.default.createElement(e.Dialog,{open:l,onClose:T},c.default.createElement(e.DialogTitle,{sx:{display:"flex",alignItems:"center"}},a,m&&!C&&c.default.createElement(e.CircularProgress,{size:20,sx:{ml:2,color:e=>e.palette.grey[500]}}),c.default.createElement(e.IconButton,{disabled:i,"aria-label":"close",onClick:T,sx:{position:"absolute",right:8,top:8,color:e=>e.palette.grey[500]}},c.default.createElement(o.default,null))),c.default.createElement(e.Box,{component:n,...r},c.default.createElement(e.DialogContent,{dividers:!0},p),D&&c.default.createElement(e.DialogActions,null,s.map((({id:t,text:l,type:a="button",onClick:n,color:o="primary"})=>c.default.createElement(e.Button,{key:t,type:a,disabled:i,onClick:n,color:o},l))),b&&c.default.createElement(e.Button,{color:"error",disabled:i||d,onClick:()=>{y(),f&&T()}},x),C&&c.default.createElement(t.LoadingButton,{type:h,loading:m,disabled:i||u,onClick:E},g))))};exports.FormDialog=({open:e,title:t,loading:l,disabled:a,submitText:n="Submit",cancelText:o="Cancel",children:i,onSubmit:u,onCancel:d})=>c.default.createElement(r,{component:"form",componentProps:{onSubmit:e=>{e.preventDefault(),u((e=>{const t=new FormData(e.currentTarget),l={};return t.forEach(((e,t)=>{l[t]=e})),l})(e))}},title:t,loading:l,disabled:l||a,open:e,onClose:d,callCloseWhenCancel:!1,cancelable:!0,acceptable:!0,cancelText:o,onCancel:d,acceptText:n,acceptType:"submit"},i);
+//# sourceMappingURL=index.js.map

package/form-dialog/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/bootstrap-dialog/bootstrap-dialog.tsx","../../../src/form-dialog/form-dialog.tsx","../../../src/utils/forms.ts"],"sourcesContent":["import {\n  Dialog,\n  DialogTitle,\n  DialogActions,\n  Button,\n  IconButton,\n  DialogContent,\n  Box,\n  CircularProgress,\n} from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\nimport CloseIcon from \"@mui/icons-material/Close\";\nimport React from \"react\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\n\nexport const BootstrapDialog = ({\n  open,\n  title,\n  component,\n  componentProps = {},\n  disabled,\n  disableAccept,\n  disableCancel,\n  actions = [],\n  children,\n  loading,\n  cancelable,\n  callCloseWhenCancel = true,\n  acceptable,\n  acceptText = \"Accept\",\n  cancelText = \"Cancel\",\n  onAccept,\n  onCancel = () => null,\n  onClose,\n  acceptType = \"button\",\n}: BootstrapDialogDialogProps) => {\n  const hasActions = actions.length > 0 || acceptable || cancelable;\n\n  return (\n    <Dialog open={open} onClose={onClose}>\n      <DialogTitle sx={{ display: \"flex\", alignItems: \"center\" }}>\n        {title}\n        {loading && !acceptable && (\n          <CircularProgress size={20} sx={{ ml: 2, color: (theme) => theme.palette.grey[500] }} />\n        )}\n        <IconButton\n          disabled={disabled}\n          aria-label=\"close\"\n          onClick={onClose}\n          sx={{\n            position: \"absolute\",\n            right: 8,\n            top: 8,\n            color: (theme) => theme.palette.grey[500],\n          }}\n        >\n          <CloseIcon />\n        </IconButton>\n      </DialogTitle>\n      <Box component={component} {...componentProps}>\n        <DialogContent dividers>{children}</DialogContent>\n        {hasActions && (\n          <DialogActions>\n            {actions.map(({ id, text, type = \"button\", onClick, color = \"primary\" }) => (\n              <Button key={id} type={type} disabled={disabled} onClick={onClick} color={color}>\n                {text}\n              </Button>\n            ))}\n            {cancelable && (\n              <Button\n                color=\"error\"\n                disabled={disabled || disableCancel}\n                onClick={() => {\n                  onCancel();\n                  callCloseWhenCancel && onClose();\n                }}\n              >\n                {cancelText}\n              </Button>\n            )}\n\n            {acceptable && (\n              <LoadingButton\n                type={acceptType}\n                loading={loading}\n                disabled={disabled || disableAccept}\n                onClick={onAccept}\n              >\n                {acceptText}\n              </LoadingButton>\n            )}\n          </DialogActions>\n        )}\n      </Box>\n    </Dialog>\n  );\n};\n","import { BootstrapDialog } from \"../bootstrap-dialog\";\nimport { FormEvent } from \"react\";\nimport React from \"react\";\nimport { BootstrapDialogDialogProps } from \"../dialog/dialog.types\";\nimport { getFormData } from \"~/utils/forms\";\n\ntype OmitBaseDialogProps =\n  | \"cancelable\"\n  | \"acceptable\"\n  | \"onAccept\"\n  | \"onCancel\"\n  | \"onClose\"\n  | \"actions\"\n  | \"callCloseWhenCancel\"\n  | \"component\"\n  | \"acceptType\";\nexport interface FormDialogProps<T> extends Omit<BootstrapDialogDialogProps, OmitBaseDialogProps> {\n  submitText?: string;\n  canceText?: string;\n  onCancel: () => void;\n  onSubmit: (data: T) => void;\n}\n\nexport const FormDialog = <T,>({\n  open,\n  title,\n  loading,\n  disabled,\n  submitText = \"Submit\",\n  cancelText = \"Cancel\",\n  children,\n  onSubmit,\n  onCancel,\n}: FormDialogProps<T>) => {\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    onSubmit(getFormData<T>(e));\n  };\n\n  return (\n    <BootstrapDialog\n      component=\"form\"\n      componentProps={{\n        onSubmit: handleSubmit,\n      }}\n      title={title}\n      loading={loading}\n      disabled={loading || disabled}\n      open={open}\n      onClose={onCancel}\n      callCloseWhenCancel={false}\n      cancelable\n      acceptable\n      cancelText={cancelText}\n      onCancel={onCancel}\n      acceptText={submitText}\n      acceptType=\"submit\"\n    >\n      {children}\n    </BootstrapDialog>\n  );\n};\n","import { FormEvent } from \"react\";\n\nexport const getFormData = <T>(e: FormEvent<HTMLFormElement>): T => {\n  const data = new FormData(e.currentTarget);\n  const rawData: Record<string, any> = {};\n\n  data.forEach((value, key) => {\n    rawData[key] = value;\n  });\n  return rawData as T;\n};\n"],"names":["BootstrapDialog","open","title","component","componentProps","disabled","disableAccept","disableCancel","actions","children","loading","cancelable","callCloseWhenCancel","acceptable","acceptText","cancelText","onAccept","onCancel","onClose","acceptType","hasActions","length","React","createElement","Dialog","DialogTitle","sx","display","alignItems","CircularProgress","size","ml","color","theme","palette","grey","IconButton","onClick","position","right","top","CloseIcon","Box","DialogContent","dividers","DialogActions","map","id","text","type","Button","key","LoadingButton","submitText","onSubmit","e","preventDefault","data","FormData","currentTarget","rawData","forEach","value","getFormData"],"mappings":"6QAeO,MAAMA,EAAkB,EAC7BC,OACAC,QACAC,YACAC,iBAAiB,CAAA,EACjBC,WACAC,gBACAC,gBACAC,UAAU,GACVC,WACAC,UACAC,aACAC,uBAAsB,EACtBC,aACAC,aAAa,SACbC,aAAa,SACbC,WACAC,WAAW,KAAM,MACjBC,UACAC,aAAa,aAEb,MAAMC,EAAaZ,EAAQa,OAAS,GAAKR,GAAcF,EAEvD,OACEW,EAAAA,QAACC,cAAAC,EAAMA,OAAC,CAAAvB,KAAMA,EAAMiB,QAASA,GAC3BI,UAAAC,cAACE,EAAWA,YAAA,CAACC,GAAI,CAAEC,QAAS,OAAQC,WAAY,WAC7C1B,EACAQ,IAAYG,GACXS,wBAACO,EAAAA,iBAAgB,CAACC,KAAM,GAAIJ,GAAI,CAAEK,GAAI,EAAGC,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,QAEhFb,EAAAA,QAAAC,cAACa,aAAU,CACT/B,SAAUA,EAAQ,aACP,QACXgC,QAASnB,EACTQ,GAAI,CACFY,SAAU,WACVC,MAAO,EACPC,IAAK,EACLR,MAAQC,GAAUA,EAAMC,QAAQC,KAAK,OAGvCb,EAAAA,QAACC,cAAAkB,UAAY,QAGjBnB,EAAA,QAAAC,cAACmB,EAAGA,IAAC,CAAAvC,UAAWA,KAAeC,GAC7BkB,EAAA,QAAAC,cAACoB,EAAaA,cAAA,CAACC,UAAQ,GAAEnC,GACxBW,GACCE,EAAA,QAAAC,cAACsB,EAAAA,cAAa,KACXrC,EAAQsC,KAAI,EAAGC,KAAIC,OAAMC,OAAO,SAAUZ,UAASL,QAAQ,aAC1DV,EAAAA,QAAAC,cAAC2B,EAAAA,OAAO,CAAAC,IAAKJ,EAAIE,KAAMA,EAAM5C,SAAUA,EAAUgC,QAASA,EAASL,MAAOA,GACvEgB,KAGJrC,GACCW,EAAA,QAAAC,cAAC2B,EAAAA,OACC,CAAAlB,MAAM,QACN3B,SAAUA,GAAYE,EACtB8B,QAAS,KACPpB,IACAL,GAAuBM,GAAS,GAGjCH,GAIJF,GACCS,EAAC,QAAAC,cAAA6B,EAAAA,cACC,CAAAH,KAAM9B,EACNT,QAASA,EACTL,SAAUA,GAAYC,EACtB+B,QAASrB,GAERF,KAOb,qBCxEsB,EACxBb,OACAC,QACAQ,UACAL,WACAgD,aAAa,SACbtC,aAAa,SACbN,WACA6C,WACArC,cASEK,EAAAA,sBAACtB,EAAe,CACdG,UAAU,OACVC,eAAgB,CACdkD,SAVgBC,IACpBA,EAAEC,iBAEFF,ECnCuB,CAAIC,IAC7B,MAAME,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAA+B,CAAA,EAKrC,OAHAH,EAAKI,SAAQ,CAACC,EAAOX,KACnBS,EAAQT,GAAOW,CAAK,IAEfF,CAAY,ED4BRG,CAAeR,GAAG,GASzBrD,MAAOA,EACPQ,QAASA,EACTL,SAAUK,GAAWL,EACrBJ,KAAMA,EACNiB,QAASD,EACTL,qBAAqB,EACrBD,cACAE,YAAU,EACVE,WAAYA,EACZE,SAAUA,EACVH,WAAYuC,EACZlC,WAAW,UAEVV"}

package/form-dialog/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/form-dialog",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/lab": "^5.0.0-alpha.134",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/form-dialog/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/form-dialog",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/generators/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e={string:"",number:0,boolean:!1,enum:"",multienum:[],date:new Date(1970,0,1,0,0),time:new Date(1970,0,1,0,0),datetime:new Date(1970,0,1,0,0),group:{},"group[]":[],"string[]":[],"number[]":[]},t=(t,n)=>n&&n[t.id]||"default"in t&&t.default||e[t.type];exports.newInstanceFromValuesOrZeroValue=(e,n=undefined)=>{const r={};return e.fields.forEach((e=>{if("group"===e.type){const u={};e.value.forEach((r=>{u[r.id]=t(r,n&&n[e.id])})),r[e.id]=u}else r[e.id]=t(e,n)})),r};
+//# sourceMappingURL=index.js.map

package/generators/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/generators/generators.model.ts"],"sourcesContent":["/**\n * MODEL TYPES\n * Types used to specify the model\n */\nexport type ModelFieldTypes =\n  | \"string\"\n  | \"number\"\n  | \"string[]\"\n  | \"number[]\"\n  | \"boolean\"\n  | \"enum\"\n  | \"multienum\"\n  | \"date\"\n  | \"time\"\n  | \"datetime\";\n\ntype Base = {\n  id: string;\n  description: string;\n  name: string;\n  listable?: boolean;\n  updatable?: boolean;\n  required?: boolean;\n};\n\ntype Breakpoints = {\n  xs?: number;\n  sm?: number;\n  md?: number;\n  lg?: number;\n  xl?: number;\n};\n\ntype StringField = {\n  type: \"string\";\n};\n\ntype StringArrayField = {\n  type: \"string[]\";\n};\n\ntype NumberField = {\n  type: \"number\";\n};\n\ntype NumberArrayField = {\n  type: \"number[]\";\n};\n\ntype BooleanField = {\n  type: \"boolean\";\n};\n\ntype EnumField = {\n  type: \"enum\";\n  value: string[];\n};\n\ntype MultiEnumField = {\n  type: \"multienum\";\n  value: string[];\n};\n\ntype DateField = {\n  type: \"date\";\n  format: string;\n  default: Date;\n};\n\ntype TimeField = {\n  type: \"time\";\n  format: string;\n  default: Date;\n};\n\ntype DatetimeField = {\n  type: \"datetime\";\n  format: string;\n  default: Date;\n};\n\ntype SingleFields =\n  | StringField\n  | NumberField\n  | StringArrayField\n  | NumberArrayField\n  | BooleanField\n  | EnumField\n  | MultiEnumField\n  | DateField\n  | TimeField\n  | DatetimeField;\n\nexport type GroupField = {\n  type: \"group\";\n  value: (Base & Breakpoints & SingleFields)[];\n} & Base;\n\nexport type ArrayGroupField = {\n  type: \"group[]\";\n  value: (Base & Breakpoints & SingleFields)[];\n} & Base;\n\ntype Fields = SingleFields | GroupField | ArrayGroupField;\nexport type ModelField = Base & Breakpoints & Fields;\n\nexport type Model = {\n  fields: ModelField[];\n};\n\n/**\n * INSTANCE TYPES\n * Types used to represent an instance of a model specification\n */\nexport type BaseFieldType = string | number | boolean | Date;\nexport type ArrayFieldType = string[] | number[];\nexport type SingleFieldType = BaseFieldType | ArrayFieldType;\nexport type GroupInstanceType = { [key: string]: SingleFieldType };\nexport type ArrayInstanceType = { [key: string]: SingleFieldType }[];\nexport type FieldType = SingleFieldType | GroupInstanceType;\n\nexport interface BasicModelInstance {\n  id: string;\n  [key: string]: FieldType;\n}\n\n/**\n * UTILITIES\n * Some functions used in several places to help to manage models\n */\nconst InitialStateZeroValue: Record<ModelFieldTypes | \"group\" | \"group[]\", FieldType | undefined> =\n  {\n    string: \"\",\n    number: 0,\n    boolean: false,\n    enum: \"\",\n    multienum: [],\n    date: new Date(1970, 0, 1, 0, 0),\n    time: new Date(1970, 0, 1, 0, 0),\n    datetime: new Date(1970, 0, 1, 0, 0),\n    group: {},\n    \"group[]\": [],\n    \"string[]\": [],\n    \"number[]\": [],\n  };\n\nconst getFieldValueOrZero = (\n  field: ModelField,\n  values: BasicModelInstance | GroupInstanceType | undefined,\n) => {\n  return (\n    (values && values[field.id]) ||\n    (\"default\" in field && field.default) ||\n    InitialStateZeroValue[field.type]\n  );\n};\n\nexport const newInstanceFromValuesOrZeroValue = <T extends BasicModelInstance>(\n  model: Model,\n  values: T | undefined = undefined,\n): T => {\n  const obj: Record<string, FieldType | undefined> = {};\n\n  model.fields.forEach((field) => {\n    if (field.type === \"group\") {\n      const value: GroupInstanceType = {};\n      field.value.forEach((groupField) => {\n        value[groupField.id] = getFieldValueOrZero(\n          groupField,\n          values && (values[field.id] as GroupInstanceType),\n        ) as SingleFieldType;\n      });\n      obj[field.id] = value;\n    } else {\n      obj[field.id] = getFieldValueOrZero(field, values);\n    }\n  });\n\n  return obj as T;\n};\n"],"names":["InitialStateZeroValue","string","number","boolean","enum","multienum","date","Date","time","datetime","group","getFieldValueOrZero","field","values","id","default","type","model","undefined","obj","fields","forEach","value","groupField"],"mappings":"oEAkIA,MAAMA,EACJ,CACEC,OAAQ,GACRC,OAAQ,EACRC,SAAS,EACTC,KAAM,GACNC,UAAW,GACXC,KAAM,IAAIC,KAAK,KAAM,EAAG,EAAG,EAAG,GAC9BC,KAAM,IAAID,KAAK,KAAM,EAAG,EAAG,EAAG,GAC9BE,SAAU,IAAIF,KAAK,KAAM,EAAG,EAAG,EAAG,GAClCG,MAAO,CAAE,EACT,UAAW,GACX,WAAY,GACZ,WAAY,IAGVC,EAAsB,CAC1BC,EACAC,IAGGA,GAAUA,EAAOD,EAAME,KACvB,YAAaF,GAASA,EAAMG,SAC7Bf,EAAsBY,EAAMI,+CAIgB,CAC9CC,EACAJ,EAAwBK,aAExB,MAAMC,EAA6C,CAAA,EAiBnD,OAfAF,EAAMG,OAAOC,SAAST,IACpB,GAAmB,UAAfA,EAAMI,KAAkB,CAC1B,MAAMM,EAA2B,CAAA,EACjCV,EAAMU,MAAMD,SAASE,IACnBD,EAAMC,EAAWT,IAAMH,EACrBY,EACAV,GAAWA,EAAOD,EAAME,IACN,IAEtBK,EAAIP,EAAME,IAAMQ,CACjB,MACCH,EAAIP,EAAME,IAAMH,EAAoBC,EAAOC,EAC5C,IAGIM,CAAQ"}

package/generators/cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@pautena/react-design-system/generators",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts"
+}

package/generators/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/generators",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts"
 }

package/group-value-card/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("react"));exports.GroupValueCard=({title:t,subtitle:a,centered:i,children:l,dense:n})=>{const{typography:o}=e.useTheme(),d=(({lightWeight:t=100,darkWeight:r=900}={})=>{const{palette:a}=e.useTheme();return"light"===a.mode?a.grey[t]:a.grey[r]})({lightWeight:200,darkWeight:800});return r.default.createElement(e.Paper,{sx:{paddingBottom:n?0:1}},r.default.createElement(e.Box,{bgcolor:d,px:n?1:2,py:n?.5:1,lineHeight:n?0:void 0},r.default.createElement(e.Typography,{variant:n?"body1":"h6",role:"heading","aria-level":1},t),a&&r.default.createElement(e.Typography,{variant:n?"caption":"body2",role:"heading","aria-level":2,lineHeight:n?o.pxToRem(15):void 0},a)),r.default.createElement(e.Grid,{container:!0,padding:1,rowSpacing:n?1:2,justifyContent:i?"center":"flex-start"},l))};
+//# sourceMappingURL=index.js.map

package/group-value-card/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/group-value-card/group-value-card.tsx","../../../src/utils/theme.ts"],"sourcesContent":["import { Grid, Paper, Box, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { useGetDefaultThemeColor } from \"../utils/theme\";\nimport { ValueItemElement } from \"../value-item/value-item\";\n\nexport interface GroupValueCardProps {\n  title: string;\n  subtitle?: string;\n  centered?: boolean;\n  children: ValueItemElement | ValueItemElement[];\n  dense?: boolean;\n}\n\nexport const GroupValueCard = ({\n  title,\n  subtitle,\n  centered,\n  children,\n  dense,\n}: GroupValueCardProps) => {\n  const { typography } = useTheme();\n  const defaultColor = useGetDefaultThemeColor({ lightWeight: 200, darkWeight: 800 });\n\n  return (\n    <Paper\n      sx={{\n        paddingBottom: dense ? 0 : 1,\n      }}\n    >\n      <Box\n        bgcolor={defaultColor}\n        px={dense ? 1 : 2}\n        py={dense ? 0.5 : 1}\n        lineHeight={dense ? 0 : undefined}\n      >\n        <Typography variant={dense ? \"body1\" : \"h6\"} role=\"heading\" aria-level={1}>\n          {title}\n        </Typography>\n        {subtitle && (\n          <Typography\n            variant={dense ? \"caption\" : \"body2\"}\n            role=\"heading\"\n            aria-level={2}\n            lineHeight={dense ? typography.pxToRem(15) : undefined}\n          >\n            {subtitle}\n          </Typography>\n        )}\n      </Box>\n      <Grid\n        container\n        padding={1}\n        rowSpacing={dense ? 1 : 2}\n        justifyContent={centered ? \"center\" : \"flex-start\"}\n      >\n        {children}\n      </Grid>\n    </Paper>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["title","subtitle","centered","children","dense","typography","useTheme","defaultColor","lightWeight","darkWeight","palette","mode","grey","useGetDefaultThemeColor","React","createElement","Paper","sx","paddingBottom","Box","bgcolor","px","py","lineHeight","undefined","Typography","variant","role","pxToRem","Grid","container","padding","rowSpacing","justifyContent"],"mappings":"4NAa8B,EAC5BA,QACAC,WACAC,WACAC,WACAC,YAEA,MAAMC,WAAEA,GAAeC,EAAAA,WACjBC,ECjB+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYJ,EAAAA,WACpB,MAAwB,UAAjBI,EAAQC,KAAmBD,EAAQE,KAAKJ,GAAeE,EAAQE,KAAKH,EAAW,EDYjEI,CAAwB,CAAEL,YAAa,IAAKC,WAAY,MAE7E,OACEK,UAAAC,cAACC,EAAKA,MAAA,CACJC,GAAI,CACFC,cAAed,EAAQ,EAAI,IAG7BU,EAAA,QAAAC,cAACI,MACC,CAAAC,QAASb,EACTc,GAAIjB,EAAQ,EAAI,EAChBkB,GAAIlB,EAAQ,GAAM,EAClBmB,WAAYnB,EAAQ,OAAIoB,GAExBV,EAAAA,QAACC,cAAAU,EAAAA,YAAWC,QAAStB,EAAQ,QAAU,KAAMuB,KAAK,UAAsB,aAAA,GACrE3B,GAEFC,GACCa,EAAAA,QAAAC,cAACU,aACC,CAAAC,QAAStB,EAAQ,UAAY,QAC7BuB,KAAK,UAAS,aACF,EACZJ,WAAYnB,EAAQC,EAAWuB,QAAQ,SAAMJ,GAE5CvB,IAIPa,EAAA,QAAAC,cAACc,OACC,CAAAC,WACA,EAAAC,QAAS,EACTC,WAAY5B,EAAQ,EAAI,EACxB6B,eAAgB/B,EAAW,SAAW,cAErCC,GAGL"}

package/group-value-card/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/group-value-card",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/group-value-card/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/group-value-card",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/header/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material"),r=require("react-router-dom");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(e);const l=e.forwardRef(((e,t)=>{const{href:a,...l}=e;return n.default.createElement(r.Link,{ref:t,to:a,...l})})),i=e.forwardRef(((e,r)=>n.default.createElement(t.Link,{...e,component:l}))),o=e.createContext([0,()=>null]);o.Provider;const d=({loading:e,children:r})=>{const{typography:a}=t.useTheme();return e?n.default.createElement(t.CircularProgress,{color:"inherit",size:a.h4.fontSize,"aria-label":"title loading"}):"string"==typeof r?n.default.createElement(t.Typography,{variant:"h4",role:"heading","aria-level":1},r):n.default.createElement(n.default.Fragment,null,r)},u=({loading:e,children:r})=>{const{typography:a}=t.useTheme();return e?n.default.createElement(t.CircularProgress,{color:"inherit",size:a.body1.fontSize,"aria-label":"subtitle loading"}):"string"==typeof r?n.default.createElement(t.Typography,{variant:"body1",role:"heading","aria-level":2},r):n.default.createElement(n.default.Fragment,null,r)};exports.Header=({title:a="",loadingTitle:l,subtitle:c,loadingSubtitle:s,preset:f="default",actionsVariant:m="outlined",breadcrumbs:p,actions:h,tabs:b,tabsMode:g="panel",navigationButton:y})=>{const x=r.useLocation(),{palette:E}=t.useTheme(),T=(({lightWeight:e=100,darkWeight:r=900}={})=>{const{palette:a}=t.useTheme();return"light"===a.mode?a.grey[e]:a.grey[r]})(),[v,k]=e.useContext(o),C={default:T,primary:E.primary.main,secondary:E.secondary.main,inherit:"inherit",transparent:"transparent"},B=C[f],z={default:E.getContrastText(C.default),primary:E.primary.contrastText,secondary:E.secondary.contrastText,inherit:"inherit",transparent:E.text.primary}[f],w="panel"===g?v:b?.findIndex((e=>e.href===x.pathname));return n.default.createElement(t.Box,{bgcolor:B,color:z},n.default.createElement(t.Container,null,n.default.createElement(t.Box,{sx:{py:3,display:"flex",flexDirection:"row",justifyContent:"space-between"}},n.default.createElement(t.Box,null,y&&n.default.createElement(t.Button,{href:y.href,size:"small",color:"inherit",LinkComponent:i,startIcon:y.icon,sx:{mb:1}},y.text),p?.length&&n.default.createElement(t.Breadcrumbs,{color:"inherit",separator:"›","aria-label":"breadcrumb",sx:{marginTop:1}},p.map((({id:e,link:t,text:r})=>n.default.createElement(i,{key:e,underline:"hover",color:"inherit",href:t,variant:"body2",role:"link"},r)))),n.default.createElement(d,{loading:l},a),(c||s)&&n.default.createElement(u,{loading:s},c)),h&&n.default.createElement(t.Box,null,h.map((({disabled:e,id:r,href:a,onClick:l,text:o},d)=>n.default.createElement(t.Button,{component:a?i:"button",role:"button",color:"inherit",disabled:e,key:r,variant:m,size:"small",href:a,onClick:l,sx:{mr:d!=h.length-1?1:0}},o))))),b&&n.default.createElement(t.Tabs,{value:w,textColor:"inherit",onChange:"panel"===g?(e,t)=>k(t):void 0},b.map((({id:e,label:r,disabled:a,href:l})=>{const o={label:r,disabled:a};return"panel"===g?n.default.createElement(t.Tab,{key:e,...o}):n.default.createElement(t.Tab,{key:e,...o,component:i,href:l})})))))},exports.HeaderSubtitle=u,exports.HeaderTitle=d;
+//# sourceMappingURL=index.js.map

package/header/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/header/header-title.tsx","../../../src/header/header.tsx","../../../src/utils/theme.ts"],"sourcesContent":["import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import { CircularProgress, Typography, useTheme } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\n\nexport type HeaderTitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderTitle = ({ loading, children }: HeaderTitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress color=\"inherit\" size={typography.h4.fontSize} aria-label=\"title loading\" />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n\nexport type HeaderSubtitleProps = PropsWithChildren<{ loading?: boolean }>;\n\nexport const HeaderSubtitle = ({ loading, children }: HeaderSubtitleProps) => {\n  const { typography } = useTheme();\n\n  if (loading) {\n    return (\n      <CircularProgress\n        color=\"inherit\"\n        size={typography.body1.fontSize}\n        aria-label=\"subtitle loading\"\n      />\n    );\n  }\n\n  if (typeof children === \"string\") {\n    return (\n      <Typography variant=\"body1\" role=\"heading\" aria-level={2}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return <>{children}</>;\n};\n","import React from \"react\";\nimport {\n  Breadcrumbs,\n  Typography,\n  Container,\n  useTheme,\n  Box,\n  Tabs,\n  Tab,\n  Button,\n} from \"@mui/material\";\nimport { Link } from \"~/link\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { HeaderComponent, HeaderPreset, HeaderProps } from \"./header.types\";\nimport { useTab } from \"~/tab-provider\";\nimport { useLocation } from \"react-router-dom\";\nimport { HeaderSubtitle, HeaderTitle } from \"./header-title\";\n\n/**\n * Section used to explain give basic information about the page\n * and put the main actions\n */\nexport const Header: HeaderComponent = ({\n  title = \"\",\n  loadingTitle,\n  subtitle,\n  loadingSubtitle,\n  preset = \"default\",\n  actionsVariant = \"outlined\",\n  breadcrumbs,\n  actions,\n  tabs,\n  tabsMode = \"panel\",\n  navigationButton,\n}: HeaderProps) => {\n  const location = useLocation();\n  const { palette } = useTheme();\n  const defaultColor = useGetDefaultThemeColor();\n  const [selectedTab, setSelectedTab] = useTab();\n\n  const bgColorPresets: Record<HeaderPreset, string> = {\n    default: defaultColor,\n    primary: palette.primary.main,\n    secondary: palette.secondary.main,\n    inherit: \"inherit\",\n    transparent: \"transparent\",\n  };\n  const bgColor = bgColorPresets[preset];\n  const textColorPresets: Record<HeaderPreset, string> = {\n    default: palette.getContrastText(bgColorPresets.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    inherit: \"inherit\",\n    transparent: palette.text.primary,\n  };\n  const textColor = textColorPresets[preset];\n\n  const modedSelectedTab =\n    tabsMode === \"panel\" ? selectedTab : tabs?.findIndex((tab) => tab.href === location.pathname);\n\n  return (\n    <Box bgcolor={bgColor} color={textColor}>\n      <Container>\n        <Box sx={{ py: 3, display: \"flex\", flexDirection: \"row\", justifyContent: \"space-between\" }}>\n          <Box>\n            {navigationButton && (\n              <Button\n                href={navigationButton.href}\n                size=\"small\"\n                color=\"inherit\"\n                LinkComponent={Link}\n                startIcon={navigationButton.icon}\n                sx={{ mb: 1 }}\n              >\n                {navigationButton.text}\n              </Button>\n            )}\n            {breadcrumbs?.length && (\n              <Breadcrumbs\n                color=\"inherit\"\n                separator=\"›\"\n                aria-label=\"breadcrumb\"\n                sx={{ marginTop: 1 }}\n              >\n                {breadcrumbs.map(({ id, link, text }) => (\n                  <Link\n                    key={id}\n                    underline=\"hover\"\n                    color=\"inherit\"\n                    href={link}\n                    variant=\"body2\"\n                    role=\"link\"\n                  >\n                    {text}\n                  </Link>\n                ))}\n              </Breadcrumbs>\n            )}\n            <HeaderTitle loading={loadingTitle}>{title}</HeaderTitle>\n            {(subtitle || loadingSubtitle) && (\n              <HeaderSubtitle loading={loadingSubtitle}>{subtitle}</HeaderSubtitle>\n            )}\n          </Box>\n          {actions && (\n            <Box>\n              {actions.map(({ disabled, id, href, onClick, text }, i) => (\n                <Button\n                  component={href ? Link : \"button\"}\n                  role=\"button\"\n                  color=\"inherit\"\n                  disabled={disabled}\n                  key={id}\n                  variant={actionsVariant}\n                  size=\"small\"\n                  href={href}\n                  onClick={onClick}\n                  sx={{ mr: i != actions.length - 1 ? 1 : 0 }}\n                >\n                  {text}\n                </Button>\n              ))}\n            </Box>\n          )}\n        </Box>\n        {tabs && (\n          <Tabs\n            value={modedSelectedTab}\n            textColor=\"inherit\"\n            onChange={tabsMode === \"panel\" ? (_, index) => setSelectedTab(index) : undefined}\n          >\n            {tabs.map(({ id, label, disabled, href }) => {\n              const tabProps = { label, disabled };\n              if (tabsMode === \"panel\") {\n                return <Tab key={id} {...tabProps} />;\n              } else {\n                return <Tab key={id} {...tabProps} component={Link} href={href} />;\n              }\n            })}\n          </Tabs>\n        )}\n      </Container>\n    </Box>\n  );\n};\n","import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","React","createElement","RouterLink","Link","to","_1","MuiLink","component","TabContext","createContext","Provider","HeaderTitle","loading","children","typography","useTheme","CircularProgress","color","size","h4","fontSize","Typography","variant","role","Fragment","HeaderSubtitle","body1","title","loadingTitle","subtitle","loadingSubtitle","preset","actionsVariant","breadcrumbs","actions","tabs","tabsMode","navigationButton","location","useLocation","palette","defaultColor","lightWeight","darkWeight","mode","grey","useGetDefaultThemeColor","selectedTab","setSelectedTab","useContext","bgColorPresets","default","primary","main","secondary","inherit","transparent","bgColor","textColor","getContrastText","contrastText","text","modedSelectedTab","findIndex","tab","pathname","Box","bgcolor","Container","sx","py","display","flexDirection","justifyContent","Button","LinkComponent","startIcon","icon","mb","length","Breadcrumbs","separator","marginTop","map","id","link","key","underline","disabled","onClick","i","mr","Tabs","value","onChange","_","index","undefined","label","tabProps","Tab"],"mappings":"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"}

package/header/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/header",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/header/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/header",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/header-layout/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("react"),l=require("@mui/icons-material/ReportProblem");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(t),n=r(l);const i=()=>a.default.createElement(e.Box,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},a.default.createElement(e.CircularProgress,null)),o=t.createContext([0,()=>null]).Provider,u=({children:e,initialValue:l=0})=>{const r=t.useState(l);return a.default.createElement(o,{value:r},e)},c=({title:t,subtitle:l,icon:r,iconSize:n=200,actions:i})=>a.default.createElement(e.Box,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center"},r&&r({size:n,color:"primary"}),a.default.createElement(e.Typography,{variant:"h4",role:"heading","aria-level":1},t),a.default.createElement(e.Typography,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2}},l),i&&a.default.createElement(e.Box,{sx:{pt:2}},i.map((({id:t,text:l,href:r,onClick:n},o)=>a.default.createElement(e.Button,{key:t,role:"button",variant:"contained",href:r,onClick:n,sx:{mr:o<i.length-1?2:0}},l))))),d=()=>a.default.createElement(n.default,{color:"error",sx:{width:200,height:200}});exports.HeaderLayout=({loading:t,children:l,fetching:r,error:n})=>{const[o,s]=l;return a.default.createElement(u,null,a.default.createElement(e.Box,{display:"flex",flexDirection:"column",height:1},o,r&&a.default.createElement(e.Box,{width:1},a.default.createElement(e.LinearProgress,null)),t&&a.default.createElement(i,null),n&&a.default.createElement(e.Box,{mt:4},a.default.createElement(c,{icon:n.icon||d,title:n.title||"There has been an error",subtitle:n.message})),!t&&!n&&s))};
+//# sourceMappingURL=index.js.map

package/header-layout/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx","../../../src/tab-provider/tab-provider.context.ts","../../../src/tab-provider/tab-provider.provider.tsx","../../../src/placeholder/placeholder.tsx","../../../src/header-layout/header-layout.tsx"],"sourcesContent":["import { CircularProgress, Box } from \"@mui/material\";\nimport React from \"react\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n","import { createContext, Dispatch, SetStateAction, useContext } from \"react\";\n\nexport const TabContext = createContext<[number, Dispatch<SetStateAction<number>>]>([\n  0,\n  () => null,\n]);\nexport const TabContextProvider = TabContext.Provider;\nexport const useTab = () => useContext(TabContext);\n","import React from \"react\";\nimport { PropsWithChildren, useState } from \"react\";\nimport { TabContextProvider } from \"./tab-provider.context\";\n\ntype TabProviderProps = PropsWithChildren<{\n  initialValue?: number;\n}>;\n\nexport const TabProvider = ({ children, initialValue = 0 }: TabProviderProps) => {\n  const tabState = useState(initialValue);\n\n  return <TabContextProvider value={tabState}>{children}</TabContextProvider>;\n};\n","import React, { ReactElement } from \"react\";\nimport { Box, Typography, Button } from \"@mui/material\";\n\ntype IconColor =\n  | \"inherit\"\n  | \"action\"\n  | \"disabled\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"info\"\n  | \"success\"\n  | \"warning\";\n\nexport interface PlaceholderAction {\n  id: string;\n  text: string;\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface PlaceholderIconArgs {\n  size: number;\n  color: IconColor;\n}\n\nexport type PlaceholderIcon = ({ size, color }: PlaceholderIconArgs) => ReactElement;\n\nexport interface PlaceholderProps {\n  title: string;\n  subtitle: string;\n  iconSize?: number;\n  icon?: PlaceholderIcon;\n  actions?: PlaceholderAction[];\n}\n\nexport const Placeholder = ({\n  title,\n  subtitle,\n  icon,\n  iconSize = 200,\n  actions,\n}: PlaceholderProps) => {\n  return (\n    <Box\n      display=\"flex\"\n      flexDirection=\"column\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      textAlign=\"center\"\n    >\n      {icon && icon({ size: iconSize, color: \"primary\" })}\n      <Typography variant=\"h4\" role=\"heading\" aria-level={1}>\n        {title}\n      </Typography>\n      <Typography variant=\"subtitle1\" role=\"heading\" aria-level={2} sx={{ mt: 2 }}>\n        {subtitle}\n      </Typography>\n      {actions && (\n        <Box sx={{ pt: 2 }}>\n          {actions.map(({ id, text, href, onClick }, index) => (\n            <Button\n              key={id}\n              role=\"button\"\n              variant=\"contained\"\n              href={href}\n              onClick={onClick}\n              sx={{ mr: index < actions.length - 1 ? 2 : 0 }}\n            >\n              {text}\n            </Button>\n          ))}\n        </Box>\n      )}\n    </Box>\n  );\n};\n","import { Box, LinearProgress } from \"@mui/material\";\nimport React from \"react\";\nimport { LoadingArea } from \"~/loading-area\";\nimport { TabProvider } from \"~/tab-provider\";\nimport ReportProblemIcon from \"@mui/icons-material/ReportProblem\";\nimport { Placeholder, PlaceholderIcon } from \"~/placeholder\";\nimport { HeaderElement } from \"~/header\";\nimport { ContentElement } from \"~/content\";\n\nexport interface HeaderLayoutError {\n  icon?: PlaceholderIcon;\n  title?: string;\n  message: string;\n}\n\nexport interface HeaderLayoutProps {\n  loading?: boolean;\n  fetching?: boolean;\n  error?: HeaderLayoutError;\n  children: [HeaderElement, ContentElement];\n}\n\nconst DefaultErrorIcon = () => <ReportProblemIcon color=\"error\" sx={{ width: 200, height: 200 }} />;\n\nexport const HeaderLayout = ({ loading, children, fetching, error }: HeaderLayoutProps) => {\n  const [headerElement, contentElement] = children;\n\n  return (\n    <TabProvider>\n      <Box display=\"flex\" flexDirection=\"column\" height={1}>\n        {headerElement}\n        {fetching && (\n          <Box width={1}>\n            <LinearProgress />\n          </Box>\n        )}\n        {loading && <LoadingArea />}\n        {error && (\n          <Box mt={4}>\n            <Placeholder\n              icon={error.icon || DefaultErrorIcon}\n              title={error.title || \"There has been an error\"}\n              subtitle={error.message}\n            />\n          </Box>\n        )}\n        {!loading && !error && contentElement}\n      </Box>\n    </TabProvider>\n  );\n};\n"],"names":["LoadingArea","React","Box","width","height","display","justifyContent","alignItems","createElement","CircularProgress","TabContextProvider","createContext","Provider","TabProvider","children","initialValue","tabState","useState","value","Placeholder","title","subtitle","icon","iconSize","actions","flexDirection","textAlign","size","color","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","key","mr","length","DefaultErrorIcon","ReportProblemIcon","loading","fetching","error","headerElement","contentElement","LinearProgress","message"],"mappings":"+PAMO,MAAMA,EAAc,IAEvBC,wBAACC,EAAGA,IAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,UAC1EN,EAAAA,QAAAO,cAACC,mBAAgB,OCHVC,EAJaC,EAAAA,cAA0D,CAClF,EACA,IAAM,OAEqCC,SCEhCC,EAAc,EAAGC,WAAUC,eAAe,MACrD,MAAMC,EAAWC,WAASF,GAE1B,OAAOd,EAAAA,QAAAO,cAACE,EAAmB,CAAAQ,MAAOF,GAAWF,EAA8B,ECyBhEK,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEvB,wBAACC,EAAGA,IAAA,CACFG,QAAQ,OACRoB,cAAc,SACdnB,eAAe,SACfC,WAAW,SACXmB,UAAU,UAETJ,GAAQA,EAAK,CAAEK,KAAMJ,EAAUK,MAAO,YACvC3B,EAAAA,QAAAO,cAACqB,aAAU,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,GACjDX,GAEHnB,EAAC,QAAAO,cAAAqB,EAAUA,YAACC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,IACrEZ,GAEFG,GACCvB,EAAAA,QAAAO,cAACN,MAAI,CAAA8B,GAAI,CAAEE,GAAI,IACZV,EAAQW,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCvC,UAAAO,cAACiC,EAAMA,OACL,CAAAC,IAAKN,EACLL,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEW,GAAIH,EAAQhB,EAAQoB,OAAS,EAAI,EAAI,IAE1CP,OC/CTQ,EAAmB,IAAM5C,wBAAC6C,EAAiB,QAAA,CAAClB,MAAM,QAAQI,GAAI,CAAE7B,MAAO,IAAKC,OAAQ,4BAE9D,EAAG2C,UAASjC,WAAUkC,WAAUC,YAC1D,MAAOC,EAAeC,GAAkBrC,EAExC,OACEb,wBAACY,EAAW,KACVZ,UAAAO,cAACN,EAAGA,IAAA,CAACG,QAAQ,OAAOoB,cAAc,SAASrB,OAAQ,GAChD8C,EACAF,GACC/C,EAAA,QAAAO,cAACN,EAAGA,IAAC,CAAAC,MAAO,GACVF,EAAAA,QAACO,cAAA4C,iBAAiB,OAGrBL,GAAW9C,EAAC,QAAAO,cAAAR,EAAc,MAC1BiD,GACChD,EAAA,QAAAO,cAACN,EAAGA,IAAC,CAAA+B,GAAI,GACPhC,EAAC,QAAAO,cAAAW,EACC,CAAAG,KAAM2B,EAAM3B,MAAQuB,EACpBzB,MAAO6B,EAAM7B,OAAS,0BACtBC,SAAU4B,EAAMI,YAIpBN,IAAYE,GAASE,GAG3B"}

package/header-layout/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/header-layout",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/header-layout/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/header-layout",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/hooks/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-router-dom");exports.useNavigateWhenValueChanges=(t,u,{from:s,to:a})=>{const o=e.useRef(),c=r.useNavigate();e.useEffect((()=>{o.current===s&&u===a&&c(t),o.current=u}),[u])};
+//# sourceMappingURL=index.js.map

package/hooks/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/hooks/routing/routing.hooks.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useNavigate } from \"react-router-dom\";\n\nexport interface NavigateWhenValueChangesOptions<T> {\n  from: T;\n  to: T;\n}\n\nexport const useNavigateWhenValueChanges = <T>(\n  path: string,\n  value: T | undefined,\n  { from, to }: NavigateWhenValueChangesOptions<T>,\n) => {\n  const prevRef = useRef<T>();\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    if (prevRef.current === from && value === to) {\n      navigate(path);\n    }\n    prevRef.current = value;\n  }, [value]);\n};\n"],"names":["path","value","from","to","prevRef","useRef","navigate","useNavigate","useEffect","current"],"mappings":"6JAQ2C,CACzCA,EACAC,GACEC,OAAMC,SAER,MAAMC,EAAUC,EAAAA,SACVC,EAAWC,EAAAA,cAEjBC,EAAAA,WAAU,KACJJ,EAAQK,UAAYP,GAAQD,IAAUE,GACxCG,EAASN,GAEXI,EAAQK,QAAUR,CAAK,GACtB,CAACA,GAAO"}

package/hooks/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/hooks",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/hooks/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/hooks",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/label/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("react"));exports.Label=({text:t,variant:a="default",textTransform:o="capitalize",sx:n})=>{const{palette:i,typography:s}=e.useTheme(),l={default:"light"===i.mode?i.grey[100]:i.grey[900],primary:i.primary.light,secondary:i.secondary.light,info:i.info.light,warning:i.warning.light,error:i.error.light,success:i.success.light},c={default:i.getContrastText(l.default),primary:i.primary.contrastText,secondary:i.secondary.contrastText,info:i.info.contrastText,warning:i.warning.contrastText,error:i.error.contrastText,success:i.success.contrastText};return r.default.createElement(e.Box,{height:24,minWidth:22,display:"inline-flex",justifyContent:"center",alignItems:"center",bgcolor:l[a],color:c[a],fontSize:s.caption.fontSize,fontWeight:s.fontWeightBold,lineHeight:0,textTransform:o,whiteSpace:"nowrap",borderRadius:2,role:"label","aria-label":`${t} ${a} label`,py:0,px:1,sx:{cursor:"default",...n}},t)},exports.labelClasses={root:"RdsLabel-root"};
+//# sourceMappingURL=index.js.map

package/label/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/label/label.tsx"],"sourcesContent":["import { Box, SxProps, Theme, useTheme } from \"@mui/material\";\nimport React from \"react\";\n\nexport type LabelVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"default\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport const labelClasses = {\n  root: \"RdsLabel-root\",\n};\n\nexport interface LabelProps {\n  /**\n   * Content of the component\n   */\n  text: string;\n  /**\n   * Color palette used to draw the component\n   */\n  variant?: LabelVariant;\n\n  /**\n   * Custom styles\n   */\n  sx?: SxProps<Theme>;\n\n  /**\n   * Show the text as uppercase\n   */\n  textTransform?: \"none\" | \"capitalize\" | \"uppercase\";\n}\n\n/**\n * Compact element to represent a text\n */\nexport const Label = ({\n  text,\n  variant = \"default\",\n  textTransform = \"capitalize\",\n  sx,\n}: LabelProps) => {\n  const { palette, typography } = useTheme();\n\n  const backgroundColor: Record<LabelVariant, string> = {\n    default: palette.mode === \"light\" ? palette.grey[100] : palette.grey[900],\n    primary: palette.primary.light,\n    secondary: palette.secondary.light,\n    info: palette.info.light,\n    warning: palette.warning.light,\n    error: palette.error.light,\n    success: palette.success.light,\n  };\n\n  const textColor: Record<LabelVariant, string> = {\n    default: palette.getContrastText(backgroundColor.default),\n    primary: palette.primary.contrastText,\n    secondary: palette.secondary.contrastText,\n    info: palette.info.contrastText,\n    warning: palette.warning.contrastText,\n    error: palette.error.contrastText,\n    success: palette.success.contrastText,\n  };\n\n  return (\n    <Box\n      height={24}\n      minWidth={22}\n      display=\"inline-flex\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      bgcolor={backgroundColor[variant]}\n      color={textColor[variant]}\n      fontSize={typography.caption.fontSize}\n      fontWeight={typography.fontWeightBold}\n      lineHeight={0}\n      textTransform={textTransform}\n      whiteSpace=\"nowrap\"\n      borderRadius={2}\n      role=\"label\"\n      aria-label={`${text} ${variant} label`}\n      py={0}\n      px={1}\n      sx={{ cursor: \"default\", ...sx }}\n    >\n      {text}\n    </Box>\n  );\n};\n"],"names":["text","variant","textTransform","sx","palette","typography","useTheme","backgroundColor","default","mode","grey","primary","light","secondary","info","warning","error","success","textColor","getContrastText","contrastText","React","Box","height","minWidth","display","justifyContent","alignItems","bgcolor","color","fontSize","caption","fontWeight","fontWeightBold","lineHeight","whiteSpace","borderRadius","role","py","px","cursor","root"],"mappings":"mNAwCqB,EACnBA,OACAC,UAAU,UACVC,gBAAgB,aAChBC,SAEA,MAAMC,QAAEA,EAAOC,WAAEA,GAAeC,EAAQA,WAElCC,EAAgD,CACpDC,QAA0B,UAAjBJ,EAAQK,KAAmBL,EAAQM,KAAK,KAAON,EAAQM,KAAK,KACrEC,QAASP,EAAQO,QAAQC,MACzBC,UAAWT,EAAQS,UAAUD,MAC7BE,KAAMV,EAAQU,KAAKF,MACnBG,QAASX,EAAQW,QAAQH,MACzBI,MAAOZ,EAAQY,MAAMJ,MACrBK,QAASb,EAAQa,QAAQL,OAGrBM,EAA0C,CAC9CV,QAASJ,EAAQe,gBAAgBZ,EAAgBC,SACjDG,QAASP,EAAQO,QAAQS,aACzBP,UAAWT,EAAQS,UAAUO,aAC7BN,KAAMV,EAAQU,KAAKM,aACnBL,QAASX,EAAQW,QAAQK,aACzBJ,MAAOZ,EAAQY,MAAMI,aACrBH,QAASb,EAAQa,QAAQG,cAG3B,OACEC,wBAACC,MAAG,CACFC,OAAQ,GACRC,SAAU,GACVC,QAAQ,cACRC,eAAe,SACfC,WAAW,SACXC,QAASrB,EAAgBN,GACzB4B,MAAOX,EAAUjB,GACjB6B,SAAUzB,EAAW0B,QAAQD,SAC7BE,WAAY3B,EAAW4B,eACvBC,WAAY,EACZhC,cAAeA,EACfiC,WAAW,SACXC,aAAc,EACdC,KAAK,QAAO,aACA,GAAGrC,KAAQC,UACvBqC,GAAI,EACJC,GAAI,EACJpC,GAAI,CAAEqC,OAAQ,aAAcrC,IAE3BH,EAEH,uBA/EwB,CAC1ByC,KAAM"}

package/label/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/label",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/label/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/label",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/link/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("react-router-dom"),t=require("@mui/material");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e);const n=e.forwardRef(((e,t)=>{const{href:o,...n}=e;return a.default.createElement(r.Link,{ref:t,to:o,...n})})),u=e.forwardRef(((e,r)=>a.default.createElement(t.Link,{...e,component:n})));exports.Link=u,exports.LinkBehaviour=n;
+//# sourceMappingURL=index.js.map

package/link/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","React","createElement","RouterLink","Link","to","_1","MuiLink","component"],"mappings":"uOAMa,MAAAA,EAAgBC,EAAUA,YAGrC,CAACC,EAAOC,KACR,MAAMC,KAAEA,KAASC,GAAUH,EAC3B,OAAOI,UAACC,cAAAC,EAAUC,KAAC,CAAAN,IAAKA,EAAKO,GAAIN,KAAUC,GAAS,IAGzCI,EAAOR,EAAUA,YAAiB,CAACC,EAAOS,IAC9CL,EAAA,QAAAC,cAACK,OAAa,IAAAV,EAAeW,UAAWb"}

package/link/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/link",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/link/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/link",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/link-card/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),r=require("@mui/material/colors"),t=require("react"),o=require("react-router-dom");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=a(t);const l=t.forwardRef(((e,r)=>{const{href:t,...a}=e;return n.default.createElement(o.Link,{ref:r,to:t,...a})})),i=t.forwardRef(((r,t)=>n.default.createElement(e.Link,{...r,component:l})));exports.LinkCard=({variant:t="primary",title:o,message:a,href:l,linkText:u,sx:c})=>{const{palette:m}=e.useTheme(),d={p:3,display:"flex",flexDirection:"column",textDecoration:"none",backgroundColor:"light"===m.mode?r.grey[50]:r.grey[900],borderColor:r.grey[400],":hover":{borderColor:m[t].main,backgroundColor:"light"===m.mode?m.common.white:r.grey[800]}};return n.default.createElement(e.Paper,{component:i,href:l,variant:"outlined",sx:{...d,...c}},n.default.createElement(e.Typography,{variant:"h6"},o),n.default.createElement(e.Typography,{variant:"caption",sx:{mt:2}},a),u&&n.default.createElement(e.Typography,{color:t,variant:"button",sx:{mt:2}},u))};
+//# sourceMappingURL=index.js.map

package/link-card/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/link/link.tsx","../../../src/link-card/link-card.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link as RouterLink, LinkProps as RouterLinkProps } from \"react-router-dom\";\nimport { forwardRef } from \"react\";\nimport { LinkProps, Link as MuiLink } from \"@mui/material\";\n\n/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */\nexport const LinkBehaviour = forwardRef<\n  any,\n  Omit<RouterLinkProps, \"to\"> & { href: RouterLinkProps[\"to\"] }\n>((props, ref) => {\n  const { href, ...other } = props;\n  return <RouterLink ref={ref} to={href} {...other} />;\n});\n\nexport const Link = forwardRef<any, LinkProps>((props, _1) => {\n  return <MuiLink {...(props as any)} component={LinkBehaviour} />;\n});\n","import { Paper, SxProps, Theme, Typography, useTheme } from \"@mui/material\";\nimport { grey } from \"@mui/material/colors\";\nimport React from \"react\";\nimport { Link } from \"~/link\";\n\nexport type LinkCardVariant = \"primary\" | \"secondary\" | \"info\" | \"warning\" | \"error\";\nexport interface LinkCardProps {\n  variant?: LinkCardVariant;\n  href: string;\n  title: string;\n  message: string;\n  linkText?: string;\n  sx?: SxProps<Theme>;\n}\n\nexport const LinkCard = ({\n  variant = \"primary\",\n  title,\n  message,\n  href,\n  linkText,\n  sx,\n}: LinkCardProps) => {\n  const { palette } = useTheme();\n\n  const rootSx: SxProps<Theme> = {\n    p: 3,\n    display: \"flex\",\n    flexDirection: \"column\",\n    textDecoration: \"none\",\n    backgroundColor: palette.mode === \"light\" ? grey[50] : grey[900],\n    borderColor: grey[400],\n    \":hover\": {\n      borderColor: palette[variant].main,\n      backgroundColor: palette.mode === \"light\" ? palette.common.white : grey[800],\n    },\n  };\n\n  return (\n    <Paper component={Link} href={href} variant=\"outlined\" sx={{ ...rootSx, ...sx }}>\n      <Typography variant=\"h6\">{title}</Typography>\n      <Typography variant=\"caption\" sx={{ mt: 2 }}>\n        {message}\n      </Typography>\n      {linkText && (\n        <Typography color={variant} variant=\"button\" sx={{ mt: 2 }}>\n          {linkText}\n        </Typography>\n      )}\n    </Paper>\n  );\n};\n"],"names":["LinkBehaviour","forwardRef","props","ref","href","other","React","createElement","RouterLink","Link","to","_1","MuiLink","component","variant","title","message","linkText","sx","palette","useTheme","rootSx","p","display","flexDirection","textDecoration","backgroundColor","mode","grey","borderColor","main","common","white","Paper","Typography","mt","color"],"mappings":"yQAMO,MAAMA,EAAgBC,EAAUA,YAGrC,CAACC,EAAOC,KACR,MAAMC,KAAEA,KAASC,GAAUH,EAC3B,OAAOI,UAACC,cAAAC,EAAUC,KAAC,CAAAN,IAAKA,EAAKO,GAAIN,KAAUC,GAAS,IAGzCI,EAAOR,EAAUA,YAAiB,CAACC,EAAOS,IAC9CL,EAAA,QAAAC,cAACK,OAAa,IAAAV,EAAeW,UAAWb,uBCAzB,EACtBc,UAAU,UACVC,QACAC,UACAZ,OACAa,WACAC,SAEA,MAAMC,QAAEA,GAAYC,EAAAA,WAEdC,EAAyB,CAC7BC,EAAG,EACHC,QAAS,OACTC,cAAe,SACfC,eAAgB,OAChBC,gBAAkC,UAAjBP,EAAQQ,KAAmBC,EAAIA,KAAC,IAAMA,EAAIA,KAAC,KAC5DC,YAAaD,EAAIA,KAAC,KAClB,SAAU,CACRC,YAAaV,EAAQL,GAASgB,KAC9BJ,gBAAkC,UAAjBP,EAAQQ,KAAmBR,EAAQY,OAAOC,MAAQJ,EAAIA,KAAC,OAI5E,OACEtB,EAAAA,QAACC,cAAA0B,EAAAA,MAAM,CAAApB,UAAWJ,EAAML,KAAMA,EAAMU,QAAQ,WAAWI,GAAI,IAAKG,KAAWH,IACzEZ,EAAA,QAAAC,cAAC2B,EAAUA,WAAC,CAAApB,QAAQ,MAAMC,GAC1BT,EAAAA,QAAAC,cAAC2B,aAAU,CAACpB,QAAQ,UAAUI,GAAI,CAAEiB,GAAI,IACrCnB,GAEFC,GACCX,EAAA,QAAAC,cAAC2B,EAAUA,WAAA,CAACE,MAAOtB,EAASA,QAAQ,SAASI,GAAI,CAAEiB,GAAI,IACpDlB,GAIP"}

package/link-card/cjs/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@pautena/react-design-system/link-card",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0",
+    "react-router-dom": "^6.14.0"
+  }
+}

package/link-card/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/link-card",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/list-panel/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),t=require("react"),r=require("@mui/material/colors");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=a(t);const l=t.createContext(void 0),i=l.Provider;exports.ListPanel=({items:a,defaultSelectedItem:l,colBreakpoint:n=3,children:u,onSelectedItemChange:d=(()=>null)})=>{const c=(({lightWeight:t=100,darkWeight:r=900}={})=>{const{palette:a}=e.useTheme();return"light"===a.mode?a.grey[t]:a.grey[r]})(),{palette:s,typography:m}=e.useTheme(),[p,g]=t.useState(l);return o.default.createElement(i,{value:p},o.default.createElement(e.Grid,{container:!0,bgcolor:c,height:1},o.default.createElement(e.Grid,{item:!0,xs:n,pl:1,height:1},o.default.createElement(e.List,{sx:{height:1,overflowY:"auto"}},a.map((({id:t,text:a,tooltip:l})=>{const i=t===p,n=o.default.createElement(e.ListItemButton,{key:t,dense:!0,selected:i,onClick:()=>(e=>{g(e),d(e)})(t),"aria-label":a,sx:{backgroundColor:i?`${s.grey[300]} !important`:void 0}},o.default.createElement(e.ListItemText,{primary:a,primaryTypographyProps:{fontWeight:i?m.fontWeightMedium:void 0,color:i?m.body1.color:r.grey[600]}}));return l?o.default.createElement(e.Tooltip,{key:t,title:l,enterDelay:1500,placement:"right"},n):n})))),o.default.createElement(e.Grid,{item:!0,xs:12-n,pl:1,py:1,pr:1},o.default.createElement(e.Paper,{elevation:0,sx:{width:1,height:1,backgroundColor:s.background.paper}},u))))},exports.ListPanelContext=l,exports.ListPanelContextProvider=i,exports.useListPanel=()=>t.useContext(l);
+//# sourceMappingURL=index.js.map

package/list-panel/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/theme.ts","../../../src/list-panel/list-panel.context.tsx","../../../src/list-panel/list-panel.tsx"],"sourcesContent":["import { Color, useTheme } from \"@mui/material\";\n\ntype KeyColor = keyof Color;\n\nexport const useGetDefaultThemeColor = ({\n  lightWeight = 100,\n  darkWeight = 900,\n}: { lightWeight?: KeyColor; darkWeight?: KeyColor } = {}) => {\n  const { palette } = useTheme();\n  return palette.mode === \"light\" ? palette.grey[lightWeight] : palette.grey[darkWeight];\n};\n","import { createContext, useContext } from \"react\";\n\nexport const ListPanelContext = createContext<string | undefined>(undefined);\nexport const ListPanelContextProvider = ListPanelContext.Provider;\nexport const useListPanel = () => useContext(ListPanelContext);\n","import { Grid, List, ListItemButton, ListItemText, Paper, Tooltip, useTheme } from \"@mui/material\";\nimport React, { PropsWithChildren, useState } from \"react\";\nimport { useGetDefaultThemeColor } from \"~/utils\";\nimport { ListPanelContextProvider } from \"./list-panel.context\";\nimport { grey } from \"@mui/material/colors\";\n\nexport interface ListPanelItem {\n  id: string;\n  text: string;\n  tooltip?: string;\n}\n\nexport type ListPanelProps = PropsWithChildren<{\n  defaultSelectedItem?: string;\n  items: ListPanelItem[];\n  colBreakpoint?: number;\n  onSelectedItemChange?: (id: string) => void;\n}>;\n\nexport const ListPanel = ({\n  items,\n  defaultSelectedItem,\n  colBreakpoint = 3,\n  children,\n  onSelectedItemChange = () => null,\n}: ListPanelProps) => {\n  const bgColor = useGetDefaultThemeColor();\n  const { palette, typography } = useTheme();\n  const [selectedItem, setSelectedItem] = useState(defaultSelectedItem);\n\n  const handleSelectItem = (id: string) => {\n    setSelectedItem(id);\n    onSelectedItemChange(id);\n  };\n\n  return (\n    <ListPanelContextProvider value={selectedItem}>\n      <Grid container bgcolor={bgColor} height={1}>\n        <Grid item xs={colBreakpoint} pl={1} height={1}>\n          <List sx={{ height: 1, overflowY: \"auto\" }}>\n            {items.map(({ id, text, tooltip }) => {\n              const selected = id === selectedItem;\n\n              const contentEl = (\n                <ListItemButton\n                  key={id}\n                  dense\n                  selected={selected}\n                  onClick={() => handleSelectItem(id)}\n                  aria-label={text}\n                  sx={{ backgroundColor: selected ? `${palette.grey[300]} !important` : undefined }}\n                >\n                  <ListItemText\n                    primary={text}\n                    primaryTypographyProps={{\n                      fontWeight: selected ? typography.fontWeightMedium : undefined,\n                      color: selected ? typography.body1.color : grey[600],\n                    }}\n                  />\n                </ListItemButton>\n              );\n\n              return tooltip ? (\n                <Tooltip key={id} title={tooltip} enterDelay={1500} placement=\"right\">\n                  {contentEl}\n                </Tooltip>\n              ) : (\n                contentEl\n              );\n            })}\n          </List>\n        </Grid>\n        <Grid item xs={12 - colBreakpoint} pl={1} py={1} pr={1}>\n          <Paper\n            elevation={0}\n            sx={{\n              width: 1,\n              height: 1,\n              backgroundColor: palette.background.paper,\n            }}\n          >\n            {children}\n          </Paper>\n        </Grid>\n      </Grid>\n    </ListPanelContextProvider>\n  );\n};\n"],"names":["ListPanelContext","createContext","undefined","ListPanelContextProvider","Provider","items","defaultSelectedItem","colBreakpoint","children","onSelectedItemChange","bgColor","lightWeight","darkWeight","palette","useTheme","mode","grey","useGetDefaultThemeColor","typography","selectedItem","setSelectedItem","useState","React","createElement","value","Grid","container","bgcolor","height","item","xs","pl","List","sx","overflowY","map","id","text","tooltip","selected","contentEl","ListItemButton","key","dense","onClick","handleSelectItem","backgroundColor","ListItemText","primary","primaryTypographyProps","fontWeight","fontWeightMedium","color","body1","Tooltip","title","enterDelay","placement","py","pr","Paper","elevation","width","background","paper","useContext"],"mappings":"2OAIO,MCFMA,EAAmBC,EAAaA,mBAAqBC,GACrDC,EAA2BH,EAAiBI,2BCgBhC,EACvBC,QACAC,sBACAC,gBAAgB,EAChBC,WACAC,uBAAuB,KAAM,UAE7B,MAAMC,EFtB+B,GACrCC,cAAc,IACdC,aAAa,KACwC,MACrD,MAAMC,QAAEA,GAAYC,EAAAA,WACpB,MAAwB,UAAjBD,EAAQE,KAAmBF,EAAQG,KAAKL,GAAeE,EAAQG,KAAKJ,EAAW,EEiBtEK,IACVJ,QAAEA,EAAOK,WAAEA,GAAeJ,EAAQA,YACjCK,EAAcC,GAAmBC,EAAQA,SAACf,GAOjD,OACEgB,EAAC,QAAAC,cAAApB,EAAyB,CAAAqB,MAAOL,GAC/BG,UAACC,cAAAE,EAAIA,KAAC,CAAAC,WAAU,EAAAC,QAASjB,EAASkB,OAAQ,GACxCN,EAAAA,QAAAC,cAACE,OAAI,CAACI,MAAI,EAACC,GAAIvB,EAAewB,GAAI,EAAGH,OAAQ,GAC3CN,EAAC,QAAAC,cAAAS,OAAK,CAAAC,GAAI,CAAEL,OAAQ,EAAGM,UAAW,SAC/B7B,EAAM8B,KAAI,EAAGC,KAAIC,OAAMC,cACtB,MAAMC,EAAWH,IAAOjB,EAElBqB,EACJlB,EAAA,QAAAC,cAACkB,EAAAA,eACC,CAAAC,IAAKN,EACLO,SACAJ,SAAUA,EACVK,QAAS,IAlBA,CAACR,IACxBhB,EAAgBgB,GAChB3B,EAAqB2B,EAAG,EAgBKS,CAAiBT,GACpB,aAAAC,EACZJ,GAAI,CAAEa,gBAAiBP,EAAW,GAAG1B,EAAQG,KAAK,uBAAoBd,IAEtEoB,EAAA,QAAAC,cAACwB,EAAYA,aACX,CAAAC,QAASX,EACTY,uBAAwB,CACtBC,WAAYX,EAAWrB,EAAWiC,sBAAmBjD,EACrDkD,MAAOb,EAAWrB,EAAWmC,MAAMD,MAAQpC,EAAIA,KAAC,SAMxD,OAAOsB,EACLhB,EAAAA,QAACC,cAAA+B,EAAOA,QAAC,CAAAZ,IAAKN,EAAImB,MAAOjB,EAASkB,WAAY,KAAMC,UAAU,SAC3DjB,GAGH,CACD,MAIPlB,EAAC,QAAAC,cAAAE,EAAIA,MAACI,MAAI,EAACC,GAAI,GAAKvB,EAAewB,GAAI,EAAG2B,GAAI,EAAGC,GAAI,GACnDrC,EAAA,QAAAC,cAACqC,EAAKA,MACJ,CAAAC,UAAW,EACX5B,GAAI,CACF6B,MAAO,EACPlC,OAAQ,EACRkB,gBAAiBjC,EAAQkD,WAAWC,QAGrCxD,KAKT,qFDlFwB,IAAMyD,EAAAA,WAAWjE"}

package/list-panel/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/list-panel",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/list-panel/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/list-panel",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/loading-area/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=t(require("react"));exports.LoadingArea=()=>r.default.createElement(e.Box,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},r.default.createElement(e.CircularProgress,null));
+//# sourceMappingURL=index.js.map

package/loading-area/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx"],"sourcesContent":["import { CircularProgress, Box } from \"@mui/material\";\nimport React from \"react\";\n\n/**\n * Displays a centered loading indicator\n */\nexport const LoadingArea = () => {\n  return (\n    <Box width={1} height={1} display=\"flex\" justifyContent=\"center\" alignItems=\"center\">\n      <CircularProgress />\n    </Box>\n  );\n};\n"],"names":["React","Box","width","height","display","justifyContent","alignItems","createElement","CircularProgress"],"mappings":"yNAM2B,IAEvBA,wBAACC,EAAGA,IAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,UAC1EN,EAAAA,QAAAO,cAACC,mBAAgB"}

package/loading-area/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/loading-area",
+  "private": true,
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "@mui/material": "^5.13.6",
+    "react": "^18.2.0"
+  }
+}

package/loading-area/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pautena/react-design-system/loading-area",
   "private": true,
-  "main": "../cjs/index.js",
+  "main": "./cjs/index.js",
   "module": "./index.js",
   "types": "./index.d.ts",
   "dependencies": {

package/lorem-ipsum-placeholder/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@mui/material"),r=require("lorem-ipsum");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(require("react"));exports.LoremIpsumPlaceholder=({count:t=3,units:u="paragraph",variant:o="body1"})=>a.default.createElement(e.Typography,{variant:o},r.loremIpsum({count:t,units:u}));
+//# sourceMappingURL=index.js.map

package/lorem-ipsum-placeholder/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/lorem-ipsum-placeholder/lorem-ipsum-placeholder.tsx"],"sourcesContent":["import { Typography } from \"@mui/material\";\nimport { Variant } from \"@mui/material/styles/createTypography\";\nimport { loremIpsum } from \"lorem-ipsum\";\nimport { LoremUnit } from \"lorem-ipsum/types/src/constants/units\";\nimport React from \"react\";\n\nexport interface LoremIpsumPlaceholderProps {\n  count?: number;\n  units?: LoremUnit;\n  variant?: Variant;\n}\n\nexport const LoremIpsumPlaceholder = ({\n  count = 3,\n  units = \"paragraph\",\n  variant = \"body1\",\n}: LoremIpsumPlaceholderProps) => {\n  return (\n    <Typography variant={variant}>\n      {loremIpsum({\n        count,\n        units,\n      })}\n    </Typography>\n  );\n};\n"],"names":["count","units","variant","React","Typography","loremIpsum"],"mappings":"4PAYqC,EACnCA,QAAQ,EACRC,QAAQ,YACRC,UAAU,WAGRC,EAAAA,sBAACC,EAAUA,WAAA,CAACF,QAASA,GAClBG,aAAW,CACVL,QACAC"}