@pautena/react-design-system 0.14.0 → 0.14.2

package/placeholder/cjs/package.json

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

package/placeholder/index.js

@@ -1,2 +1,2 @@
-import e from"react";import{Box as t,Typography as i,Button as r}from"@mui/material";const n=({title:n,subtitle:a,icon:l,iconSize:o=200,actions:c})=>e.createElement(t,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center"},l&&l({size:o,color:"primary"}),e.createElement(i,{variant:"h4",role:"heading","aria-level":1},n),e.createElement(i,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2}},a),c&&e.createElement(t,{sx:{pt:2}},c.map((({id:t,text:i,href:n,onClick:a},l)=>e.createElement(r,{key:t,role:"button",variant:"contained",href:n,onClick:a,sx:{mr:l<c.length-1?2:0}},i)))));export{n as Placeholder};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import t from"@mui/material/Box";import r from"@mui/material/Typography";import n from"@mui/material/Button";const l=({title:l,subtitle:o,icon:a,iconSize:m=200,actions:c})=>e(t,{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",textAlign:"center",children:[a&&a({size:m,color:"primary"}),i(r,{variant:"h4",role:"heading","aria-level":1,children:l}),i(r,{variant:"subtitle1",role:"heading","aria-level":2,sx:{mt:2},children:o}),c&&i(t,{sx:{pt:2},children:c.map((({id:e,text:t,href:r,onClick:l},o)=>i(n,{role:"button",variant:"contained",href:r,onClick:l,sx:{mr:o<c.length-1?2:0},children:t},e)))})]});export{l as Placeholder};
 //# sourceMappingURL=index.js.map

package/placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/placeholder/placeholder.tsx"],"sourcesContent":["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"],"names":["Placeholder","title","subtitle","icon","iconSize","actions","React","Box","display","flexDirection","justifyContent","alignItems","textAlign","size","color","createElement","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","key","mr","length"],"mappings":"qFAoCa,MAAAA,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,gBAACC,EAAG,CACFC,QAAQ,OACRC,cAAc,SACdC,eAAe,SACfC,WAAW,SACXC,UAAU,UAETT,GAAQA,EAAK,CAAEU,KAAMT,EAAUU,MAAO,YACvCR,EAAAS,cAACC,EAAU,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,GACjDjB,GAEHK,EAACS,cAAAC,GAAWC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,IACrElB,GAEFG,GACCC,EAAAS,cAACR,EAAI,CAAAY,GAAI,CAAEE,GAAI,IACZhB,EAAQiB,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCrB,EAAAS,cAACa,EACC,CAAAC,IAAKN,EACLL,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEW,GAAIH,EAAQtB,EAAQ0B,OAAS,EAAI,EAAI,IAE1CP"}
+{"version":3,"file":"index.js","sources":["../../src/placeholder/placeholder.tsx"],"sourcesContent":["import { ReactElement } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\nimport Button from \"@mui/material/Button\";\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"],"names":["Placeholder","title","subtitle","icon","iconSize","actions","_jsxs","Box","display","flexDirection","justifyContent","alignItems","textAlign","children","size","color","_jsx","Typography","variant","role","sx","mt","pt","map","id","text","href","onClick","index","Button","mr","length"],"mappings":"+JAsCa,MAAAA,EAAc,EACzBC,QACAC,WACAC,OACAC,WAAW,IACXC,aAGEC,EAACC,EACC,CAAAC,QAAQ,OACRC,cAAc,SACdC,eAAe,SACfC,WAAW,SACXC,UAAU,SAAQC,SAAA,CAEjBV,GAAQA,EAAK,CAAEW,KAAMV,EAAUW,MAAO,YACvCC,EAACC,EAAU,CAACC,QAAQ,KAAKC,KAAK,UAAS,aAAa,EAACN,SAClDZ,IAEHe,EAACC,EAAU,CAACC,QAAQ,YAAYC,KAAK,UAAS,aAAa,EAAGC,GAAI,CAAEC,GAAI,GAAGR,SACxEX,IAEFG,GACCW,EAACT,GAAIa,GAAI,CAAEE,GAAI,GACZT,SAAAR,EAAQkB,KAAI,EAAGC,KAAIC,OAAMC,OAAMC,WAAWC,IACzCZ,EAACa,GAECV,KAAK,SACLD,QAAQ,YACRQ,KAAMA,EACNC,QAASA,EACTP,GAAI,CAAEU,GAAIF,EAAQvB,EAAQ0B,OAAS,EAAI,EAAI,GAE1ClB,SAAAY,GAPID"}

package/placeholder/package.json

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

package/query-container/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("@mui/material/Alert"),i=require("@mui/material/AlertTitle"),s=require("@mui/material/Box"),t=require("@mui/material/LinearProgress"),a=require("@mui/material/CircularProgress");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(r),n=l(i),d=l(s),c=l(t),o=l(a);const m=()=>e.jsx(d.default,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:e.jsx(o.default,{})});exports.QueryContainer=function({fetching:r=!1,loading:i=!1,error:s,success:t,children:a}){const l=Array.isArray(r)?r.some((e=>e)):r;return(Array.isArray(i)?i.some((e=>e)):i)?e.jsx(m,{}):s?e.jsxs(u.default,{severity:"error",role:"alert","aria-describedby":"error",children:[s.name&&e.jsx(n.default,{role:"heading",children:s.name}),s.message]}):e.jsxs(d.default,{children:[t&&e.jsxs(u.default,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2},children:[t.name&&e.jsx(n.default,{role:"heading",children:t.name}),t.message]}),l&&e.jsx(c.default,{sx:{width:1,mb:1}}),a]})};
+//# sourceMappingURL=index.js.map

package/query-container/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/loading-area/loading-area.tsx","../../../src/query-container/query-container.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\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 Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport Box from \"@mui/material/Box\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"~/loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","_jsx","jsx","Box","width","height","display","justifyContent","alignItems","children","CircularProgress","fetching","fetchingProp","loading","loadingProp","error","success","Array","isArray","some","f","_jsxs","Alert","severity","role","name","AlertTitle","message","jsxs","sx","mb","LinearProgress"],"mappings":"kZAMO,MAAMA,EAAc,IAEvBC,EAAAC,IAACC,EAAG,QAAA,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,SAAQC,SAClFR,EAACC,IAAAQ,UAAmB,CAAA,4BC2CpB,UACJC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOP,SACPA,IAEA,MAAME,EAAWM,MAAMC,QAAQN,GAAgBA,EAAaO,MAAMC,GAAMA,IAAKR,EAG7E,OAFgBK,MAAMC,QAAQJ,GAAeA,EAAYK,MAAMC,GAAMA,IAAKN,GAGjEb,EAAAC,IAACF,EAAW,CAAA,GAGjBe,EAEAM,OAACC,EAAAA,QAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,QAAOf,SAAA,CAC1DM,EAAMU,MAAQxB,EAAAC,IAACwB,UAAW,CAAAF,KAAK,mBAAWT,EAAMU,OAChDV,EAAMY,WAMXN,OAAClB,EAAAA,QAAG,CAAAM,SAAA,CACDO,GACCK,EAACO,KAAAN,UAAM,CAAAC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUK,GAAI,CAAEC,GAAI,aACzEd,EAAQS,MAAQxB,MAACyB,EAAAA,QAAU,CAACF,KAAK,UAASf,SAAEO,EAAQS,OACpDT,EAAQW,WAGZhB,GAAYV,MAAC8B,EAAAA,QAAe,CAAAF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDrB,IAGP"}

package/query-container/cjs/package.json

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

package/query-container/index.js

@@ -1,2 +1,2 @@
-import{Box as e,CircularProgress as r,Alert as t,AlertTitle as a,LinearProgress as n}from"@mui/material";import s from"react";const l=()=>s.createElement(e,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center"},s.createElement(r,null));function m({fetching:r=!1,loading:m=!1,error:c,success:i,children:o}){const d=Array.isArray(r)?r.some((e=>e)):r;return(Array.isArray(m)?m.some((e=>e)):m)?s.createElement(l,null):c?s.createElement(t,{severity:"error",role:"alert","aria-describedby":"error"},c.name&&s.createElement(a,{role:"heading"},c.name),c.message):s.createElement(e,null,i&&s.createElement(t,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2}},i.name&&s.createElement(a,{role:"heading"},i.name),i.message),d&&s.createElement(n,{sx:{width:1,mb:1}}),o)}export{m as QueryContainer};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import i from"@mui/material/Alert";import t from"@mui/material/AlertTitle";import a from"@mui/material/Box";import m from"@mui/material/LinearProgress";import s from"@mui/material/CircularProgress";const o=()=>r(a,{width:1,height:1,display:"flex",justifyContent:"center",alignItems:"center",children:r(s,{})});function n({fetching:s=!1,loading:n=!1,error:l,success:c,children:d}){const h=Array.isArray(s)?s.some((r=>r)):s;return(Array.isArray(n)?n.some((r=>r)):n)?r(o,{}):l?e(i,{severity:"error",role:"alert","aria-describedby":"error",children:[l.name&&r(t,{role:"heading",children:l.name}),l.message]}):e(a,{children:[c&&e(i,{severity:"success",role:"alert","aria-describedby":"success",sx:{mb:2},children:[c.name&&r(t,{role:"heading",children:c.name}),c.message]}),h&&r(m,{sx:{width:1,mb:1}}),d]})}export{n as QueryContainer};
 //# sourceMappingURL=index.js.map

package/query-container/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/loading-area/loading-area.tsx","../../src/query-container/query-container.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 { Alert, AlertTitle, Box, LinearProgress } from \"@mui/material\";\nimport React from \"react\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"../loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","React","Box","width","height","display","justifyContent","alignItems","createElement","CircularProgress","QueryContainer","fetching","fetchingProp","loading","loadingProp","error","success","children","Array","isArray","some","f","Alert","severity","role","name","AlertTitle","message","sx","mb","LinearProgress"],"mappings":"8HAMO,MAAMA,EAAc,IAEvBC,gBAACC,EAAG,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,UAC1EN,EAAAO,cAACC,EAAgB,OCyCjB,SAAUC,GACdC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOC,SACPA,IAEA,MAAMN,EAAWO,MAAMC,QAAQP,GAAgBA,EAAaQ,MAAMC,GAAMA,IAAKT,EAG7E,OAFgBM,MAAMC,QAAQL,GAAeA,EAAYM,MAAMC,GAAMA,IAAKP,GAGjEb,EAAAO,cAACR,EAAW,MAGjBe,EAEAd,EAAAO,cAACc,EAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,SACnDT,EAAMU,MAAQxB,EAAAO,cAACkB,EAAU,CAACF,KAAK,WAAWT,EAAMU,MAChDV,EAAMY,SAMX1B,gBAACC,EAAG,KACDc,GACCf,EAACO,cAAAc,GAAMC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUI,GAAI,CAAEC,GAAI,IACzEb,EAAQS,MAAQxB,EAAAO,cAACkB,EAAU,CAACF,KAAK,WAAWR,EAAQS,MACpDT,EAAQW,SAGZhB,GAAYV,EAAAO,cAACsB,EAAc,CAACF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDZ,EAGP"}
+{"version":3,"file":"index.js","sources":["../../src/loading-area/loading-area.tsx","../../src/query-container/query-container.tsx"],"sourcesContent":["import CircularProgress from \"@mui/material/CircularProgress\";\nimport Box from \"@mui/material/Box\";\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 Alert from \"@mui/material/Alert\";\nimport AlertTitle from \"@mui/material/AlertTitle\";\nimport Box from \"@mui/material/Box\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport { PropsWithChildren } from \"react\";\nimport { LoadingArea } from \"~/loading-area\";\n\nexport interface QueryContainerError {\n  /**\n   * The error title\n   */\n  name?: string;\n  /**\n   * The description of the error\n   */\n  message: string;\n}\n\nexport interface QueryContainerSuccess {\n  /**\n   * The success title\n   */\n  name?: string;\n  /**\n   * The success text\n   */\n  message: string;\n}\n\nexport type QueryContainerProps = PropsWithChildren<{\n  /**\n   * There is a query in progress and we have available data\n   */\n  fetching?: boolean | boolean[];\n\n  /**\n   * There is a query in progress and we don't have available data\n   */\n  loading?: boolean | boolean[];\n  /**\n   * The query has returned an error\n   */\n  error?: QueryContainerError;\n  /**\n   * The query has finished successfully\n   */\n  success?: QueryContainerSuccess;\n}>;\n\n/**\n * Component to show different indicators based on the usual api query statuses\n */\nexport function QueryContainer({\n  fetching: fetchingProp = false,\n  loading: loadingProp = false,\n  error,\n  success,\n  children,\n}: QueryContainerProps) {\n  const fetching = Array.isArray(fetchingProp) ? fetchingProp.some((f) => f) : fetchingProp;\n  const loading = Array.isArray(loadingProp) ? loadingProp.some((f) => f) : loadingProp;\n\n  if (loading) {\n    return <LoadingArea />;\n  }\n\n  if (error) {\n    return (\n      <Alert severity=\"error\" role=\"alert\" aria-describedby=\"error\">\n        {error.name && <AlertTitle role=\"heading\">{error.name}</AlertTitle>}\n        {error.message}\n      </Alert>\n    );\n  }\n\n  return (\n    <Box>\n      {success && (\n        <Alert severity=\"success\" role=\"alert\" aria-describedby=\"success\" sx={{ mb: 2 }}>\n          {success.name && <AlertTitle role=\"heading\">{success.name}</AlertTitle>}\n          {success.message}\n        </Alert>\n      )}\n      {fetching && <LinearProgress sx={{ width: 1, mb: 1 }} />}\n      {children}\n    </Box>\n  );\n}\n"],"names":["LoadingArea","_jsx","Box","width","height","display","justifyContent","alignItems","children","CircularProgress","QueryContainer","fetching","fetchingProp","loading","loadingProp","error","success","Array","isArray","some","f","_jsxs","Alert","severity","role","name","AlertTitle","message","sx","mb","LinearProgress"],"mappings":"wPAMO,MAAMA,EAAc,IAEvBC,EAACC,EAAG,CAACC,MAAO,EAAGC,OAAQ,EAAGC,QAAQ,OAAOC,eAAe,SAASC,WAAW,SAAQC,SAClFP,EAACQ,EAAmB,CAAA,KC2CpB,SAAUC,GACdC,SAAUC,GAAe,EACzBC,QAASC,GAAc,EAAKC,MAC5BA,EAAKC,QACLA,EAAOR,SACPA,IAEA,MAAMG,EAAWM,MAAMC,QAAQN,GAAgBA,EAAaO,MAAMC,GAAMA,IAAKR,EAG7E,OAFgBK,MAAMC,QAAQJ,GAAeA,EAAYK,MAAMC,GAAMA,IAAKN,GAGjEb,EAACD,EAAW,CAAA,GAGjBe,EAEAM,EAACC,EAAK,CAACC,SAAS,QAAQC,KAAK,QAAO,mBAAkB,QAAOhB,SAAA,CAC1DO,EAAMU,MAAQxB,EAACyB,EAAW,CAAAF,KAAK,mBAAWT,EAAMU,OAChDV,EAAMY,WAMXN,EAACnB,EAAG,CAAAM,SAAA,CACDQ,GACCK,EAACC,EAAM,CAAAC,SAAS,UAAUC,KAAK,QAAO,mBAAkB,UAAUI,GAAI,CAAEC,GAAI,aACzEb,EAAQS,MAAQxB,EAACyB,EAAU,CAACF,KAAK,UAAShB,SAAEQ,EAAQS,OACpDT,EAAQW,WAGZhB,GAAYV,EAAC6B,EAAe,CAAAF,GAAI,CAAEzB,MAAO,EAAG0B,GAAI,KAChDrB,IAGP"}

package/query-container/package.json

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

package/search-input/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Button"),r=require("@mui/material/Checkbox"),i=require("@mui/material/Collapse"),a=require("@mui/material/FormControlLabel"),l=require("@mui/material/FormGroup"),s=require("@mui/material/Grid"),u=require("@mui/material/IconButton"),n=require("@mui/material/InputAdornment"),d=require("@mui/material/Paper"),o=require("@mui/material/TextField"),c=require("react"),m=require("@mui/icons-material/Tune"),x=require("@mui/icons-material/Search"),f=require("@mui/icons-material/Clear"),h=require("@mui/x-date-pickers/DateTimePicker");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=p(t),b=p(r),q=p(i),C=p(a),v=p(l),g=p(s),y=p(u),S=p(n),k=p(d),z=p(o),D=p(m),P=p(x),T=p(f);const F={position:"absolute"},I=e=>{const t={search:""},r={search:!1};return e.forEach((({id:e,type:i})=>{t[e]="text"===i?"":"number"===i?0:"boolean"!==i&&Date.now(),r[e]=!1})),{initialData:t,fields:r}};exports.SearchInput=({label:t,placeholder:r,helperText:i,size:a="medium",fullWidth:l,dateFormat:s,filters:u=[],onSearch:n,sx:d})=>{const{initialData:o,fields:m}=I(u),[x,f]=c.useState(o),[p,A]=c.useState(m),[O,W]=c.useState(!1),w=u.length>0,B=Object.values(p).some((e=>!!e)),E=()=>{const{initialData:e,fields:t}=I(u);f(e),A(t)},G=(e,t)=>{f((r=>({...r,[e]:t}))),A((r=>({...r,[e]:!!t})))};return e.jsxs("form",{onSubmit:e=>{e.preventDefault(),W(!1);const t={};Object.entries(p).forEach((([e,r])=>{r&&(t[e]=x[e])})),n(t),E()},children:[e.jsx(z.default,{label:t,required:!0,value:x.search,onChange:e=>G("search",e.target.value),fullWidth:l,helperText:i,size:a,sx:d,InputProps:{placeholder:r,startAdornment:e.jsx(S.default,{position:"start",children:e.jsx(y.default,{type:"submit",size:a,sx:{mr:1},children:e.jsx(P.default,{})})}),endAdornment:w&&e.jsxs(S.default,{position:"end",children:[B&&e.jsx(y.default,{size:a,sx:{ml:1},onClick:E,children:e.jsx(T.default,{})}),e.jsx(y.default,{size:a,onClick:()=>W((e=>!e)),children:e.jsx(D.default,{})})]})}}),w&&e.jsx(k.default,{sx:{filtersSx:F},children:e.jsx(q.default,{in:O,children:e.jsxs(g.default,{container:!0,sx:{p:2},spacing:1,children:[O&&u.map((({id:t,label:r,type:i})=>"boolean"===i?e.jsx(g.default,{item:!0,xs:12,children:e.jsx(v.default,{children:e.jsx(C.default,{control:e.jsx(b.default,{}),label:r,checked:x[t],onChange:(e,r)=>G(t,r)})})},t):"datetime"===i?e.jsx(g.default,{item:!0,xs:12,children:e.jsx(h.DateTimePicker,{label:r,format:s,value:x[t],onChange:e=>G(t,e),slotProps:{textField:{size:"small"}},sx:{width:1}})},t):e.jsx(g.default,{item:!0,xs:12,children:e.jsx(z.default,{type:i,size:"small",label:r,value:x[t],onChange:e=>G(t,"number"===i?parseInt(e.target.value,10):e.target.value),fullWidth:!0})},t))),e.jsxs(g.default,{item:!0,xs:12,display:"flex",justifyContent:"flex-end",children:[e.jsx(j.default,{color:"error",onClick:()=>W(!1),sx:{mr:1},children:"Close"}),e.jsx(j.default,{type:"submit",children:"Search"})]})]})})})]})};
+//# sourceMappingURL=index.js.map

package/search-input/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/search-input/search-input.tsx"],"sourcesContent":["import Button from \"@mui/material/Button\";\nimport Checkbox from \"@mui/material/Checkbox\";\nimport Collapse from \"@mui/material/Collapse\";\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\nimport FormGroup from \"@mui/material/FormGroup\";\nimport Grid from \"@mui/material/Grid\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport Paper from \"@mui/material/Paper\";\nimport TextField from \"@mui/material/TextField\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\nimport { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","_jsxs","onSubmit","e","preventDefault","entries","key","children","_jsx","jsx","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","jsxs","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}

package/search-input/cjs/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@pautena/react-design-system/search-input",
+  "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",
+    "@mui/x-date-pickers": "^6.9.0",
+    "react": "^18.2.0"
+  }
+}

package/search-input/index.js

@@ -1,2 +1,2 @@
-import{TextField as e,InputAdornment as t,IconButton as l,Paper as a,Collapse as r,Grid as n,FormGroup as i,FormControlLabel as m,Checkbox as o,Button as s}from"@mui/material";import c,{useState as u}from"react";import p from"@mui/icons-material/Tune";import E from"@mui/icons-material/Search";import d from"@mui/icons-material/Clear";import{DateTimePicker as h}from"@mui/x-date-pickers";const f={position:"absolute"},x=e=>{const t={search:""},l={search:!1};return e.forEach((({id:e,type:a})=>{t[e]="text"===a?"":"number"===a?0:"boolean"!==a&&Date.now(),l[e]=!1})),{initialData:t,fields:l}},b=({label:b,placeholder:y,helperText:C,size:g="medium",fullWidth:k,dateFormat:v,filters:z=[],onSearch:D,sx:S})=>{const{initialData:j,fields:T}=x(z),[W,w]=u(j),[A,F]=u(T),[I,O]=u(!1),P=z.length>0,q=Object.values(A).some((e=>!!e)),B=()=>{const{initialData:e,fields:t}=x(z);w(e),F(t)},G=(e,t)=>{w((l=>({...l,[e]:t}))),F((l=>({...l,[e]:!!t})))};return c.createElement("form",{onSubmit:e=>{e.preventDefault(),O(!1);const t={};Object.entries(A).forEach((([e,l])=>{l&&(t[e]=W[e])})),D(t),B()}},c.createElement(e,{label:b,required:!0,value:W.search,onChange:e=>G("search",e.target.value),fullWidth:k,helperText:C,size:g,sx:S,InputProps:{placeholder:y,startAdornment:c.createElement(t,{position:"start"},c.createElement(l,{type:"submit",size:g,sx:{mr:1}},c.createElement(E,null))),endAdornment:P&&c.createElement(t,{position:"end"},q&&c.createElement(l,{size:g,sx:{ml:1},onClick:B},c.createElement(d,null)),c.createElement(l,{size:g,onClick:()=>O((e=>!e))},c.createElement(p,null)))}}),P&&c.createElement(a,{sx:{filtersSx:f}},c.createElement(r,{in:I},c.createElement(n,{container:!0,sx:{p:2},spacing:1},I&&z.map((({id:t,label:l,type:a})=>"boolean"===a?c.createElement(n,{key:t,item:!0,xs:12},c.createElement(i,null,c.createElement(m,{control:c.createElement(o,null),label:l,checked:W[t],onChange:(e,l)=>G(t,l)}))):"datetime"===a?c.createElement(n,{key:t,item:!0,xs:12},c.createElement(h,{label:l,format:v,value:W[t],onChange:e=>G(t,e),slotProps:{textField:{size:"small"}},sx:{width:1}})):c.createElement(n,{key:t,item:!0,xs:12},c.createElement(e,{type:a,size:"small",label:l,value:W[t],onChange:e=>G(t,"number"===a?parseInt(e.target.value,10):e.target.value),fullWidth:!0})))),c.createElement(n,{item:!0,xs:12,display:"flex",justifyContent:"flex-end"},c.createElement(s,{color:"error",onClick:()=>O(!1),sx:{mr:1}},"Close"),c.createElement(s,{type:"submit"},"Search"))))))};export{b as SearchInput};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import r from"@mui/material/Button";import t from"@mui/material/Checkbox";import l from"@mui/material/Collapse";import o from"@mui/material/FormControlLabel";import a from"@mui/material/FormGroup";import m from"@mui/material/Grid";import n from"@mui/material/IconButton";import s from"@mui/material/InputAdornment";import c from"@mui/material/Paper";import d from"@mui/material/TextField";import{useState as p}from"react";import u from"@mui/icons-material/Tune";import h from"@mui/icons-material/Search";import f from"@mui/icons-material/Clear";import{DateTimePicker as x}from"@mui/x-date-pickers/DateTimePicker";const b={position:"absolute"},C=e=>{const i={search:""},r={search:!1};return e.forEach((({id:e,type:t})=>{i[e]="text"===t?"":"number"===t?0:"boolean"!==t&&Date.now(),r[e]=!1})),{initialData:i,fields:r}},g=({label:g,placeholder:v,helperText:k,size:y="medium",fullWidth:z,dateFormat:D,filters:F=[],onSearch:S,sx:T})=>{const{initialData:j,fields:I}=C(F),[P,A]=p(j),[W,w]=p(I),[B,E]=p(!1),G=F.length>0,O=Object.values(W).some((e=>!!e)),q=()=>{const{initialData:e,fields:i}=C(F);A(e),w(i)},L=(e,i)=>{A((r=>({...r,[e]:i}))),w((r=>({...r,[e]:!!i})))};return e("form",{onSubmit:e=>{e.preventDefault(),E(!1);const i={};Object.entries(W).forEach((([e,r])=>{r&&(i[e]=P[e])})),S(i),q()},children:[i(d,{label:g,required:!0,value:P.search,onChange:e=>L("search",e.target.value),fullWidth:z,helperText:k,size:y,sx:T,InputProps:{placeholder:v,startAdornment:i(s,{position:"start",children:i(n,{type:"submit",size:y,sx:{mr:1},children:i(h,{})})}),endAdornment:G&&e(s,{position:"end",children:[O&&i(n,{size:y,sx:{ml:1},onClick:q,children:i(f,{})}),i(n,{size:y,onClick:()=>E((e=>!e)),children:i(u,{})})]})}}),G&&i(c,{sx:{filtersSx:b},children:i(l,{in:B,children:e(m,{container:!0,sx:{p:2},spacing:1,children:[B&&F.map((({id:e,label:r,type:l})=>i(m,"boolean"===l?{item:!0,xs:12,children:i(a,{children:i(o,{control:i(t,{}),label:r,checked:P[e],onChange:(i,r)=>L(e,r)})})}:"datetime"===l?{item:!0,xs:12,children:i(x,{label:r,format:D,value:P[e],onChange:i=>L(e,i),slotProps:{textField:{size:"small"}},sx:{width:1}})}:{item:!0,xs:12,children:i(d,{type:l,size:"small",label:r,value:P[e],onChange:i=>L(e,"number"===l?parseInt(i.target.value,10):i.target.value),fullWidth:!0})},e))),e(m,{item:!0,xs:12,display:"flex",justifyContent:"flex-end",children:[i(r,{color:"error",onClick:()=>E(!1),sx:{mr:1},children:"Close"}),i(r,{type:"submit",children:"Search"})]})]})})})]})};export{g as SearchInput};
 //# sourceMappingURL=index.js.map

package/search-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/search-input/search-input.tsx"],"sourcesContent":["import {\n  Button,\n  Checkbox,\n  Collapse,\n  FormControlLabel,\n  FormGroup,\n  Grid,\n  IconButton,\n  InputAdornment,\n  Paper,\n  SxProps,\n  TextField,\n  Theme,\n} from \"@mui/material\";\nimport React, { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","SearchInput","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","React","createElement","onSubmit","e","preventDefault","entries","key","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/search-input/search-input.tsx"],"sourcesContent":["import Button from \"@mui/material/Button\";\nimport Checkbox from \"@mui/material/Checkbox\";\nimport Collapse from \"@mui/material/Collapse\";\nimport FormControlLabel from \"@mui/material/FormControlLabel\";\nimport FormGroup from \"@mui/material/FormGroup\";\nimport Grid from \"@mui/material/Grid\";\nimport IconButton from \"@mui/material/IconButton\";\nimport InputAdornment from \"@mui/material/InputAdornment\";\nimport Paper from \"@mui/material/Paper\";\nimport TextField from \"@mui/material/TextField\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\nimport { FormEvent, useState } from \"react\";\nimport TuneIcon from \"@mui/icons-material/Tune\";\nimport SearchIcon from \"@mui/icons-material/Search\";\nimport ClearIcon from \"@mui/icons-material/Clear\";\nimport { DateTimePicker } from \"@mui/x-date-pickers/DateTimePicker\";\n\nexport type SearchInputSize = \"small\" | \"medium\";\n\nexport interface SearchFilter {\n  id: string;\n  label: string;\n  type: \"text\" | \"number\" | \"boolean\" | \"datetime\";\n}\n\nexport interface SearchInputProps<T> {\n  label?: string;\n  placeholder?: string;\n  fullWidth?: boolean;\n  helperText?: string;\n  size?: SearchInputSize;\n  filters?: SearchFilter[];\n  sx?: SxProps<Theme>;\n  dateFormat?: string;\n  onSearch: (data: T) => void;\n}\n\nconst filtersSx = {\n  position: \"absolute\",\n};\n\nconst createInitialData = <T,>(filters: SearchFilter[]) => {\n  const data: Record<string, unknown> = {\n    search: \"\",\n  };\n  const fields: Record<string, boolean> = { search: false };\n\n  filters.forEach(({ id, type }) => {\n    if (type === \"text\") {\n      data[id] = \"\";\n    } else if (type === \"number\") {\n      data[id] = 0;\n    } else if (type === \"boolean\") {\n      data[id] = false;\n    } else {\n      data[id] = Date.now();\n    }\n    fields[id] = false;\n  });\n\n  return {\n    initialData: data as T,\n    fields,\n  };\n};\n\nexport const SearchInput = <T,>({\n  label,\n  placeholder,\n  helperText,\n  size = \"medium\",\n  fullWidth,\n  dateFormat,\n  filters = [],\n  onSearch,\n  sx,\n}: SearchInputProps<T>) => {\n  const { initialData, fields } = createInitialData(filters);\n  const [data, setData] = useState<any>(initialData);\n  const [changedFields, setChangedFields] = useState(fields);\n  const [expanded, setExpanded] = useState(false);\n  const hasFilters = filters.length > 0;\n  const hasData = Object.values(changedFields).some((field) => !!field);\n\n  const clearSearch = () => {\n    const { initialData, fields } = createInitialData(filters);\n    setData(initialData);\n    setChangedFields(fields);\n  };\n\n  const handleNewData = (id: string, value: unknown) => {\n    setData((d: any) => ({ ...d, [id]: value }));\n    setChangedFields((f) => ({ ...f, [id]: !!value }));\n  };\n  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n\n    setExpanded(false);\n\n    const search: any = {};\n    Object.entries(changedFields).forEach(([key, value]) => {\n      if (value) {\n        search[key] = data[key];\n      }\n    });\n\n    onSearch(search);\n    clearSearch();\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <TextField\n        label={label}\n        required\n        value={data.search}\n        onChange={(e) => handleNewData(\"search\", e.target.value)}\n        fullWidth={fullWidth}\n        helperText={helperText}\n        size={size}\n        sx={sx}\n        InputProps={{\n          placeholder,\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <IconButton type=\"submit\" size={size} sx={{ mr: 1 }}>\n                <SearchIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n          endAdornment: hasFilters && (\n            <InputAdornment position=\"end\">\n              {hasData && (\n                <IconButton size={size} sx={{ ml: 1 }} onClick={clearSearch}>\n                  <ClearIcon />\n                </IconButton>\n              )}\n              <IconButton size={size} onClick={() => setExpanded((e) => !e)}>\n                <TuneIcon />\n              </IconButton>\n            </InputAdornment>\n          ),\n        }}\n      />\n      {hasFilters && (\n        <Paper sx={{ filtersSx }}>\n          <Collapse in={expanded}>\n            <Grid container sx={{ p: 2 }} spacing={1}>\n              {expanded &&\n                filters.map(({ id, label, type }) => {\n                  if (type === \"boolean\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <FormGroup>\n                          <FormControlLabel\n                            control={<Checkbox />}\n                            label={label}\n                            checked={data[id]}\n                            onChange={(_, value) => handleNewData(id, value)}\n                          />\n                        </FormGroup>\n                      </Grid>\n                    );\n                  }\n\n                  if (type === \"datetime\") {\n                    return (\n                      <Grid key={id} item xs={12}>\n                        <DateTimePicker\n                          label={label}\n                          format={dateFormat}\n                          value={data[id]}\n                          onChange={(value) => handleNewData(id, value)}\n                          slotProps={{\n                            textField: {\n                              size: \"small\",\n                            },\n                          }}\n                          sx={{ width: 1 }}\n                        />\n                      </Grid>\n                    );\n                  }\n\n                  return (\n                    <Grid key={id} item xs={12}>\n                      <TextField\n                        type={type}\n                        size=\"small\"\n                        label={label}\n                        value={data[id]}\n                        onChange={(e) =>\n                          handleNewData(\n                            id,\n                            type === \"number\" ? parseInt(e.target.value, 10) : e.target.value,\n                          )\n                        }\n                        fullWidth\n                      />\n                    </Grid>\n                  );\n                })}\n              <Grid item xs={12} display=\"flex\" justifyContent=\"flex-end\">\n                <Button color=\"error\" onClick={() => setExpanded(false)} sx={{ mr: 1 }}>\n                  Close\n                </Button>\n                <Button type=\"submit\">Search</Button>\n              </Grid>\n            </Grid>\n          </Collapse>\n        </Paper>\n      )}\n    </form>\n  );\n};\n"],"names":["filtersSx","position","createInitialData","filters","data","search","fields","forEach","id","type","Date","now","initialData","SearchInput","label","placeholder","helperText","size","fullWidth","dateFormat","onSearch","sx","setData","useState","changedFields","setChangedFields","expanded","setExpanded","hasFilters","length","hasData","Object","values","some","field","clearSearch","handleNewData","value","d","f","_jsxs","onSubmit","e","preventDefault","entries","key","children","_jsx","TextField","required","onChange","target","InputProps","startAdornment","InputAdornment","IconButton","mr","SearchIcon","endAdornment","ml","onClick","ClearIcon","TuneIcon","Paper","Collapse","in","Grid","container","p","spacing","map","item","xs","FormGroup","FormControlLabel","control","Checkbox","checked","_","DateTimePicker","format","slotProps","textField","width","parseInt","display","justifyContent","Button","color"],"mappings":"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"}

package/search-input/package.json

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

package/search-input/search-input.d.ts

@@ -1,4 +1,4 @@
-import { SxProps, Theme } from "@mui/material";
+import { SxProps, Theme } from "@mui/material/styles";
 export type SearchInputSize = "small" | "medium";
 export interface SearchFilter {
     id: string;

package/select/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),i=require("@mui/material/Box"),l=require("@mui/material/CircularProgress"),a=require("@mui/material/FormControl"),n=require("@mui/material/InputLabel"),u=require("@mui/material/LinearProgress"),o=require("@mui/material/Select");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(i),d=s(l),m=s(a),f=s(n),x=s(u),h=s(o);function j({children:r,centerVertical:t=!0,centerHorizontal:i=!0,sx:l}){return e.jsx(c.default,{width:1,height:1,sx:{...l,display:"flex",flexDirection:"column",justifyContent:t?"center":"flex-start",alignItems:i?"center":"flex-start"},children:r})}const b={small:15,medium:20};exports.Select=({label:i,value:l,loading:a=!1,fetching:n=!1,size:u="medium",fullWidth:o=!1,color:s,children:p,onChange:g})=>{const q=r.useId(),y=t.styled(m.default)((()=>s?{label:{color:s},".MuiOutlinedInput-notchedOutline":{borderColor:`${s} !important`},".MuiInputBase-root":{color:s},".MuiSelect-icon":{fill:s}}:{}));return e.jsxs(y,{fullWidth:o,children:[e.jsx(f.default,{id:q,children:i}),e.jsx(h.default,{labelId:q,id:q,value:l,label:i,onChange:g,disabled:n,size:u,renderValue:r=>n?e.jsx(j,{centerVertical:!0,centerHorizontal:!0,children:e.jsx(d.default,{color:"inherit",size:b[u]})}):a?e.jsxs(c.default,{display:"flex",flexDirection:"column",children:[r,e.jsx(x.default,{color:"inherit",sx:{position:"absolute",left:0,right:0,bottom:0}})]}):r,children:p})]})};
+//# sourceMappingURL=index.js.map

package/select/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/center-container/center-container.tsx","../../../src/select/select.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\n\nexport interface CenterContainerProps {\n  children: ReactNode | undefined;\n  centerVertical?: boolean;\n  centerHorizontal?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function CenterContainer({\n  children,\n  centerVertical = true,\n  centerHorizontal = true,\n  sx,\n}: CenterContainerProps) {\n  return (\n    <Box\n      width={1}\n      height={1}\n      sx={{\n        ...sx,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: centerVertical ? \"center\" : \"flex-start\",\n        alignItems: centerHorizontal ? \"center\" : \"flex-start\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n","import { ReactNode, useId } from \"react\";\nimport { styled } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport FormControl from \"@mui/material/FormControl\";\nimport InputLabel from \"@mui/material/InputLabel\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport MuiSelect from \"@mui/material/Select\";\nimport { CenterContainer } from \"~/center-container\";\nimport { SelectInputProps } from \"@mui/material/Select/SelectInput\";\n\nexport type SelectSize = \"small\" | \"medium\";\n\nexport interface SelectProps<T> {\n  label: string;\n  value: T;\n  loading?: boolean;\n  fetching?: boolean;\n  size?: SelectSize;\n  color?: string;\n  fullWidth?: boolean;\n  children?: ReactNode;\n  onChange?: SelectInputProps<T>[\"onChange\"];\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\nexport const Select = <T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n}: SelectProps<T>) => {\n  const id = useId();\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <CenterContainer centerVertical centerHorizontal>\n          <CircularProgress color=\"inherit\" size={ProgressSize[size]} />\n        </CenterContainer>\n      );\n    }\n\n    if (loading) {\n      return (\n        <Box display=\"flex\" flexDirection=\"column\">\n          {value}\n          <LinearProgress\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          />\n        </Box>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth}>\n      <InputLabel id={id}>{label}</InputLabel>\n      <MuiSelect\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </MuiSelect>\n    </StyledFormControl>\n  );\n};\n"],"names":["CenterContainer","children","centerVertical","centerHorizontal","sx","_jsx","Box","width","height","display","flexDirection","justifyContent","alignItems","ProgressSize","small","medium","label","value","loading","fetching","size","fullWidth","color","onChange","id","useId","StyledFormControl","styled","FormControl","borderColor","fill","_jsxs","InputLabel","MuiSelect","labelId","disabled","renderValue","CircularProgress","jsxs","LinearProgress","position","left","right","bottom"],"mappings":"sfAWgB,SAAAA,GAAgBC,SAC9BA,EAAQC,eACRA,GAAiB,EAAIC,iBACrBA,GAAmB,EAAIC,GACvBA,IAEA,OACEC,EAAAA,IAACC,EAAAA,QAAG,CACFC,MAAO,EACPC,OAAQ,EACRJ,GAAI,IACCA,EACHK,QAAS,OACTC,cAAe,SACfC,eAAgBT,EAAiB,SAAW,aAC5CU,WAAYT,EAAmB,SAAW,cAG3CF,SAAAA,GAGP,CCPA,MAAMY,EAA2C,CAC/CC,MAAO,GACPC,OAAQ,mBAGY,EACpBC,QACAC,QACAC,WAAU,EACVC,YAAW,EACXC,OAAO,SACPC,aAAY,EACZC,QACArB,WACAsB,eAEA,MAAMC,EAAKC,EAAAA,QA0BLC,EAAoBC,EAAAA,OAAOC,EAAW,QAAlBD,EAAoB,IACvCL,EAIE,CACLN,MAAO,CACLM,SAEF,mCAAoC,CAClCO,YAAa,GAAGP,gBAElB,qBAAsB,CACpBA,SAEF,kBAAmB,CACjBQ,KAAMR,IAdD,KAmBX,OACES,EAAAA,KAACL,EAAkB,CAAAL,UAAWA,EAC5BpB,SAAA,CAAAI,EAAAA,IAAC2B,EAAU,QAAA,CAACR,GAAIA,EAAKvB,SAAAe,IACrBX,MAAC4B,EAAAA,QACC,CAAAC,QAASV,EACTA,GAAIA,EACJP,MAAOA,EACPD,MAAOA,EACPO,SAAUA,EACVY,SAAUhB,EACVC,KAAMA,EACNgB,YAxDenB,GACfE,EAEAd,EAAAA,IAACL,EAAgB,CAAAE,kBAAeC,kBAAgB,EAAAF,SAC9CI,EAAAA,IAACgC,EAAAA,QAAiB,CAAAf,MAAM,UAAUF,KAAMP,EAAaO,OAKvDF,EAEAa,EAACO,KAAAhC,EAAG,SAACG,QAAQ,OAAOC,cAAc,SAAQT,SAAA,CACvCgB,EACDZ,MAACkC,EAAAA,QACC,CAAAjB,MAAM,UACNlB,GAAI,CAAEoC,SAAU,WAAYC,KAAM,EAAGC,MAAO,EAAGC,OAAQ,QAMxD1B,EAmCqBhB,SAEvBA,MAGL"}

package/select/cjs/package.json

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

package/select/index.js

@@ -1,2 +1,2 @@
-import e,{useId as t}from"react";import{Box as l,styled as r,FormControl as i,InputLabel as n,Select as o,CircularProgress as a,LinearProgress as c}from"@mui/material";function m({children:t,centerVertical:r=!0,centerHorizontal:i=!0,sx:n}){return e.createElement(l,{width:1,height:1,sx:{...n,display:"flex",flexDirection:"column",justifyContent:r?"center":"flex-start",alignItems:i?"center":"flex-start"}},t)}const u={small:15,medium:20},s=({label:s,value:d,loading:f=!1,fetching:h=!1,size:x="medium",fullWidth:p=!1,color:b,children:E,onChange:g})=>{const z=t(),C=r(i)((()=>b?{label:{color:b},".MuiOutlinedInput-notchedOutline":{borderColor:`${b} !important`},".MuiInputBase-root":{color:b},".MuiSelect-icon":{fill:b}}:{}));return e.createElement(C,{fullWidth:p},e.createElement(n,{id:z},s),e.createElement(o,{labelId:z,id:z,value:d,label:s,onChange:g,disabled:h,size:x,renderValue:t=>h?e.createElement(m,{centerVertical:!0,centerHorizontal:!0},e.createElement(a,{color:"inherit",size:u[x]})):f?e.createElement(l,{display:"flex",flexDirection:"column"},t,e.createElement(c,{color:"inherit",sx:{position:"absolute",left:0,right:0,bottom:0}})):t},E))};export{s as Select};
+import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useId as i}from"react";import{styled as t}from"@mui/material/styles";import l from"@mui/material/Box";import o from"@mui/material/CircularProgress";import n from"@mui/material/FormControl";import m from"@mui/material/InputLabel";import a from"@mui/material/LinearProgress";import c from"@mui/material/Select";function u({children:r,centerVertical:i=!0,centerHorizontal:t=!0,sx:o}){return e(l,{width:1,height:1,sx:{...o,display:"flex",flexDirection:"column",justifyContent:i?"center":"flex-start",alignItems:t?"center":"flex-start"},children:r})}const s={small:15,medium:20},d=({label:d,value:f,loading:h=!1,fetching:p=!1,size:x="medium",fullWidth:b=!1,color:g,children:C,onChange:z})=>{const I=i(),y=t(n)((()=>g?{label:{color:g},".MuiOutlinedInput-notchedOutline":{borderColor:`${g} !important`},".MuiInputBase-root":{color:g},".MuiSelect-icon":{fill:g}}:{}));return r(y,{fullWidth:b,children:[e(m,{id:I,children:d}),e(c,{labelId:I,id:I,value:f,label:d,onChange:z,disabled:p,size:x,renderValue:i=>p?e(u,{centerVertical:!0,centerHorizontal:!0,children:e(o,{color:"inherit",size:s[x]})}):h?r(l,{display:"flex",flexDirection:"column",children:[i,e(a,{color:"inherit",sx:{position:"absolute",left:0,right:0,bottom:0}})]}):i,children:C})]})};export{d as Select};
 //# sourceMappingURL=index.js.map

package/select/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/center-container/center-container.tsx","../../src/select/select.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport { Box, SxProps, Theme } from \"@mui/material\";\n\nexport interface CenterContainerProps {\n  children: ReactNode | undefined;\n  centerVertical?: boolean;\n  centerHorizontal?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function CenterContainer({\n  children,\n  centerVertical = true,\n  centerHorizontal = true,\n  sx,\n}: CenterContainerProps) {\n  return (\n    <Box\n      width={1}\n      height={1}\n      sx={{\n        ...sx,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: centerVertical ? \"center\" : \"flex-start\",\n        alignItems: centerHorizontal ? \"center\" : \"flex-start\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n","import React, { ReactNode, useId } from \"react\";\nimport {\n  Box,\n  CircularProgress,\n  FormControl,\n  InputLabel,\n  LinearProgress,\n  Select as MuiSelect,\n  styled,\n} from \"@mui/material\";\nimport { CenterContainer } from \"../center-container\";\nimport { SelectInputProps } from \"@mui/material/Select/SelectInput\";\n\nexport type SelectSize = \"small\" | \"medium\";\n\nexport interface SelectProps<T> {\n  label: string;\n  value: T;\n  loading?: boolean;\n  fetching?: boolean;\n  size?: SelectSize;\n  color?: string;\n  fullWidth?: boolean;\n  children?: ReactNode;\n  onChange?: SelectInputProps<T>[\"onChange\"];\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\nexport const Select = <T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n}: SelectProps<T>) => {\n  const id = useId();\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <CenterContainer centerVertical centerHorizontal>\n          <CircularProgress color=\"inherit\" size={ProgressSize[size]} />\n        </CenterContainer>\n      );\n    }\n\n    if (loading) {\n      return (\n        <Box display=\"flex\" flexDirection=\"column\">\n          {value}\n          <LinearProgress\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          />\n        </Box>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth}>\n      <InputLabel id={id}>{label}</InputLabel>\n      <MuiSelect\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </MuiSelect>\n    </StyledFormControl>\n  );\n};\n"],"names":["CenterContainer","children","centerVertical","centerHorizontal","sx","React","createElement","Box","width","height","display","flexDirection","justifyContent","alignItems","ProgressSize","small","medium","Select","label","value","loading","fetching","size","fullWidth","color","onChange","id","useId","StyledFormControl","styled","FormControl","borderColor","fill","InputLabel","MuiSelect","labelId","disabled","renderValue","CircularProgress","LinearProgress","position","left","right","bottom"],"mappings":"wKAUgB,SAAAA,GAAgBC,SAC9BA,EAAQC,eACRA,GAAiB,EAAIC,iBACrBA,GAAmB,EAAIC,GACvBA,IAEA,OACEC,EAAAC,cAACC,EAAG,CACFC,MAAO,EACPC,OAAQ,EACRL,GAAI,IACCA,EACHM,QAAS,OACTC,cAAe,SACfC,eAAgBV,EAAiB,SAAW,aAC5CW,WAAYV,EAAmB,SAAW,eAG3CF,EAGP,CCJA,MAAMa,EAA2C,CAC/CC,MAAO,GACPC,OAAQ,IAGGC,EAAS,EACpBC,QACAC,QACAC,WAAU,EACVC,YAAW,EACXC,OAAO,SACPC,aAAY,EACZC,QACAvB,WACAwB,eAEA,MAAMC,EAAKC,IA0BLC,EAAoBC,EAAOC,EAAPD,EAAoB,IACvCL,EAIE,CACLN,MAAO,CACLM,SAEF,mCAAoC,CAClCO,YAAa,GAAGP,gBAElB,qBAAsB,CACpBA,SAEF,kBAAmB,CACjBQ,KAAMR,IAdD,KAmBX,OACEnB,EAACC,cAAAsB,EAAkB,CAAAL,UAAWA,GAC5BlB,EAAAC,cAAC2B,EAAW,CAAAP,GAAIA,GAAKR,GACrBb,EAAAC,cAAC4B,EACC,CAAAC,QAAST,EACTA,GAAIA,EACJP,MAAOA,EACPD,MAAOA,EACPO,SAAUA,EACVW,SAAUf,EACVC,KAAMA,EACNe,YAxDelB,GACfE,EAEAhB,EAACC,cAAAN,EAAgB,CAAAE,kBAAeC,kBAAgB,GAC9CE,EAAAC,cAACgC,EAAgB,CAACd,MAAM,UAAUF,KAAMR,EAAaQ,MAKvDF,EAEAf,EAACC,cAAAC,EAAI,CAAAG,QAAQ,OAAOC,cAAc,UAC/BQ,EACDd,EAAAC,cAACiC,EAAc,CACbf,MAAM,UACNpB,GAAI,CAAEoC,SAAU,WAAYC,KAAM,EAAGC,MAAO,EAAGC,OAAQ,MAMxDxB,GAqCFlB,GAGL"}
+{"version":3,"file":"index.js","sources":["../../src/center-container/center-container.tsx","../../src/select/select.tsx"],"sourcesContent":["import { ReactNode } from \"react\";\nimport Box from \"@mui/material/Box\";\nimport { SxProps, Theme } from \"@mui/material/styles\";\n\nexport interface CenterContainerProps {\n  children: ReactNode | undefined;\n  centerVertical?: boolean;\n  centerHorizontal?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function CenterContainer({\n  children,\n  centerVertical = true,\n  centerHorizontal = true,\n  sx,\n}: CenterContainerProps) {\n  return (\n    <Box\n      width={1}\n      height={1}\n      sx={{\n        ...sx,\n        display: \"flex\",\n        flexDirection: \"column\",\n        justifyContent: centerVertical ? \"center\" : \"flex-start\",\n        alignItems: centerHorizontal ? \"center\" : \"flex-start\",\n      }}\n    >\n      {children}\n    </Box>\n  );\n}\n","import { ReactNode, useId } from \"react\";\nimport { styled } from \"@mui/material/styles\";\nimport Box from \"@mui/material/Box\";\nimport CircularProgress from \"@mui/material/CircularProgress\";\nimport FormControl from \"@mui/material/FormControl\";\nimport InputLabel from \"@mui/material/InputLabel\";\nimport LinearProgress from \"@mui/material/LinearProgress\";\nimport MuiSelect from \"@mui/material/Select\";\nimport { CenterContainer } from \"~/center-container\";\nimport { SelectInputProps } from \"@mui/material/Select/SelectInput\";\n\nexport type SelectSize = \"small\" | \"medium\";\n\nexport interface SelectProps<T> {\n  label: string;\n  value: T;\n  loading?: boolean;\n  fetching?: boolean;\n  size?: SelectSize;\n  color?: string;\n  fullWidth?: boolean;\n  children?: ReactNode;\n  onChange?: SelectInputProps<T>[\"onChange\"];\n}\n\nconst ProgressSize: Record<SelectSize, number> = {\n  small: 15,\n  medium: 20,\n};\n\nexport const Select = <T extends ReactNode>({\n  label,\n  value,\n  loading = false,\n  fetching = false,\n  size = \"medium\",\n  fullWidth = false,\n  color,\n  children,\n  onChange,\n}: SelectProps<T>) => {\n  const id = useId();\n\n  const renderValue = (value: T): ReactNode => {\n    if (fetching) {\n      return (\n        <CenterContainer centerVertical centerHorizontal>\n          <CircularProgress color=\"inherit\" size={ProgressSize[size]} />\n        </CenterContainer>\n      );\n    }\n\n    if (loading) {\n      return (\n        <Box display=\"flex\" flexDirection=\"column\">\n          {value}\n          <LinearProgress\n            color=\"inherit\"\n            sx={{ position: \"absolute\", left: 0, right: 0, bottom: 0 }}\n          />\n        </Box>\n      );\n    }\n\n    return value;\n  };\n\n  const StyledFormControl = styled(FormControl)(() => {\n    if (!color) {\n      return {};\n    }\n\n    return {\n      label: {\n        color,\n      },\n      \".MuiOutlinedInput-notchedOutline\": {\n        borderColor: `${color} !important`,\n      },\n      \".MuiInputBase-root\": {\n        color,\n      },\n      \".MuiSelect-icon\": {\n        fill: color,\n      },\n    };\n  });\n\n  return (\n    <StyledFormControl fullWidth={fullWidth}>\n      <InputLabel id={id}>{label}</InputLabel>\n      <MuiSelect\n        labelId={id}\n        id={id}\n        value={value}\n        label={label}\n        onChange={onChange}\n        disabled={fetching}\n        size={size}\n        renderValue={renderValue}\n      >\n        {children}\n      </MuiSelect>\n    </StyledFormControl>\n  );\n};\n"],"names":["CenterContainer","children","centerVertical","centerHorizontal","sx","_jsx","Box","width","height","display","flexDirection","justifyContent","alignItems","ProgressSize","small","medium","Select","label","value","loading","fetching","size","fullWidth","color","onChange","id","useId","StyledFormControl","styled","FormControl","borderColor","fill","_jsxs","InputLabel","MuiSelect","labelId","disabled","renderValue","CircularProgress","LinearProgress","position","left","right","bottom"],"mappings":"8WAWgB,SAAAA,GAAgBC,SAC9BA,EAAQC,eACRA,GAAiB,EAAIC,iBACrBA,GAAmB,EAAIC,GACvBA,IAEA,OACEC,EAACC,EAAG,CACFC,MAAO,EACPC,OAAQ,EACRJ,GAAI,IACCA,EACHK,QAAS,OACTC,cAAe,SACfC,eAAgBT,EAAiB,SAAW,aAC5CU,WAAYT,EAAmB,SAAW,cAG3CF,SAAAA,GAGP,CCPA,MAAMY,EAA2C,CAC/CC,MAAO,GACPC,OAAQ,IAGGC,EAAS,EACpBC,QACAC,QACAC,WAAU,EACVC,YAAW,EACXC,OAAO,SACPC,aAAY,EACZC,QACAtB,WACAuB,eAEA,MAAMC,EAAKC,IA0BLC,EAAoBC,EAAOC,EAAPD,EAAoB,IACvCL,EAIE,CACLN,MAAO,CACLM,SAEF,mCAAoC,CAClCO,YAAa,GAAGP,gBAElB,qBAAsB,CACpBA,SAEF,kBAAmB,CACjBQ,KAAMR,IAdD,KAmBX,OACES,EAACL,EAAkB,CAAAL,UAAWA,EAC5BrB,SAAA,CAAAI,EAAC4B,EAAU,CAACR,GAAIA,EAAKxB,SAAAgB,IACrBZ,EAAC6B,EACC,CAAAC,QAASV,EACTA,GAAIA,EACJP,MAAOA,EACPD,MAAOA,EACPO,SAAUA,EACVY,SAAUhB,EACVC,KAAMA,EACNgB,YAxDenB,GACfE,EAEAf,EAACL,EAAgB,CAAAE,kBAAeC,kBAAgB,EAAAF,SAC9CI,EAACiC,EAAiB,CAAAf,MAAM,UAAUF,KAAMR,EAAaQ,OAKvDF,EAEAa,EAAC1B,GAAIG,QAAQ,OAAOC,cAAc,SAAQT,SAAA,CACvCiB,EACDb,EAACkC,EACC,CAAAhB,MAAM,UACNnB,GAAI,CAAEoC,SAAU,WAAYC,KAAM,EAAGC,MAAO,EAAGC,OAAQ,QAMxDzB,EAmCqBjB,SAEvBA,MAGL"}

package/select/package.json

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

package/select/select.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import { SelectInputProps } from "@mui/material/Select/SelectInput";
 export type SelectSize = "small" | "medium";
 export interface SelectProps<T> {
@@ -12,4 +12,4 @@ export interface SelectProps<T> {
     children?: ReactNode;
     onChange?: SelectInputProps<T>["onChange"];
 }
-export declare const Select: <T extends React.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: SelectProps<T>) => JSX.Element;
+export declare const Select: <T extends ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: SelectProps<T>) => JSX.Element;

package/sign-in/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Stack"),i=require("@mui/material/Box"),a=require("@mui/material/TextField"),l=require("@mui/material/Typography"),n=require("@mui/material/Alert"),o=require("@mui/lab/LoadingButton");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(r),d=u(i),m=u(a),p=u(l),f=u(n),c=u(o);exports.SignIn=({title:r,subtitle:i,loading:a,error:l,onSubmitSignIn:n})=>{const[o,u]=t.useState(""),[h,g]=t.useState("");return e.jsxs(e.Fragment,{children:[e.jsxs(d.default,{marginBottom:2,children:[e.jsx(p.default,{component:"h1",variant:"h4",children:r}),e.jsx(p.default,{variant:"body1",children:i})]}),e.jsxs(d.default,{component:"form",onSubmit:function(e){e.preventDefault(),u(""),g("");const t=new FormData(e.currentTarget),r=t.get("email")?.toString(),i=t.get("password")?.toString();r||u("Please fill out this field"),i||g("Please fill out this field"),r&&i&&n(r,i)},children:[l&&e.jsx(s.default,{width:"100%",marginTop:1,children:e.jsx(f.default,{variant:"filled",severity:"error",children:l.message})}),e.jsx(m.default,{margin:"normal",fullWidth:!0,id:"email",label:"Email Address",name:"email",autoComplete:"email",autoFocus:!0,disabled:a,type:"email",inputProps:{role:"input"},error:!!o,helperText:o}),e.jsx(m.default,{margin:"normal",fullWidth:!0,role:"input",name:"password",label:"Password",type:"password",id:"password",disabled:a,autoComplete:"current-password",inputProps:{role:"input"},error:!!h,helperText:h}),e.jsx(c.default,{type:"submit",fullWidth:!0,variant:"contained",loading:a,disabled:a,role:"button",sx:{mt:2},children:"Sign In"})]})]})};
+//# sourceMappingURL=index.js.map

package/sign-in/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/sign-in/sign-in.tsx"],"sourcesContent":["import { FormEvent, useState } from \"react\";\nimport Stack from \"@mui/material/Stack\";\nimport Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport Alert from \"@mui/material/Alert\";\nimport LoadingButton from \"@mui/lab/LoadingButton\";\n\nexport interface SignInProps {\n  title: string;\n  subtitle: string;\n  error?: Error;\n  loading?: boolean;\n  onSubmitSignIn: (email: string, password: string) => void;\n}\n\nexport const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {\n  const [emailError, setEmailError] = useState(\"\");\n  const [passwordError, setPasswordError] = useState(\"\");\n\n  function handleSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    setEmailError(\"\");\n    setPasswordError(\"\");\n\n    const data = new FormData(e.currentTarget);\n    const email = data.get(\"email\")?.toString();\n    const password = data.get(\"password\")?.toString();\n\n    if (!email) {\n      setEmailError(\"Please fill out this field\");\n    }\n\n    if (!password) {\n      setPasswordError(\"Please fill out this field\");\n    }\n\n    if (email && password) {\n      onSubmitSignIn(email, password);\n    }\n  }\n\n  return (\n    <>\n      <Box marginBottom={2}>\n        <Typography component=\"h1\" variant=\"h4\">\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{subtitle}</Typography>\n      </Box>\n      <Box component=\"form\" onSubmit={handleSubmit}>\n        {error && (\n          <Stack width=\"100%\" marginTop={1}>\n            <Alert variant=\"filled\" severity=\"error\">\n              {error.message}\n            </Alert>\n          </Stack>\n        )}\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          id=\"email\"\n          label=\"Email Address\"\n          name=\"email\"\n          autoComplete=\"email\"\n          autoFocus\n          disabled={loading}\n          type=\"email\"\n          inputProps={{ role: \"input\" }}\n          error={!!emailError}\n          helperText={emailError}\n        />\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          role=\"input\"\n          name=\"password\"\n          label=\"Password\"\n          type=\"password\"\n          id=\"password\"\n          disabled={loading}\n          autoComplete=\"current-password\"\n          inputProps={{ role: \"input\" }}\n          error={!!passwordError}\n          helperText={passwordError}\n        />\n        <LoadingButton\n          type=\"submit\"\n          fullWidth\n          variant=\"contained\"\n          loading={loading}\n          disabled={loading}\n          role=\"button\"\n          sx={{ mt: 2 }}\n        >\n          Sign In\n        </LoadingButton>\n      </Box>\n    </>\n  );\n};\n"],"names":["title","subtitle","loading","error","onSubmitSignIn","emailError","setEmailError","useState","passwordError","setPasswordError","_jsxs","_Fragment","children","jsxs","Box","marginBottom","_jsx","Typography","component","variant","onSubmit","e","preventDefault","data","FormData","currentTarget","email","get","toString","password","Stack","width","marginTop","Alert","severity","message","jsx","TextField","margin","fullWidth","id","label","name","autoComplete","autoFocus","disabled","type","inputProps","role","helperText","LoadingButton","sx","mt"],"mappings":"+cAgBsB,EAAGA,QAAOC,WAAUC,UAASC,QAAOC,qBACxD,MAAOC,EAAYC,GAAiBC,EAAQA,SAAC,KACtCC,EAAeC,GAAoBF,EAAQA,SAAC,IAwBnD,OACEG,EAAAA,KACEC,EAAAA,SAAA,CAAAC,SAAA,CAAAF,EAAAG,KAACC,EAAG,QAAA,CAACC,aAAc,EACjBH,SAAA,CAAAI,EAAAA,IAACC,EAAU,QAAA,CAACC,UAAU,KAAKC,QAAQ,cAChCnB,IAEHgB,MAACC,EAAAA,QAAU,CAACE,QAAQ,QAASP,SAAAX,OAE/BS,OAACI,EAAAA,QAAI,CAAAI,UAAU,OAAOE,SA9B1B,SAAsBC,GACpBA,EAAEC,iBACFhB,EAAc,IACdG,EAAiB,IAEjB,MAAMc,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAAQH,EAAKI,IAAI,UAAUC,WAC3BC,EAAWN,EAAKI,IAAI,aAAaC,WAElCF,GACHpB,EAAc,8BAGXuB,GACHpB,EAAiB,8BAGfiB,GAASG,GACXzB,EAAesB,EAAOG,EAEzB,EAU+CjB,SAAA,CACzCT,GACCa,MAACc,EAAAA,QAAM,CAAAC,MAAM,OAAOC,UAAW,EAACpB,SAC9BI,EAAAA,IAACiB,EAAAA,SAAMd,QAAQ,SAASe,SAAS,QAC9BtB,SAAAT,EAAMgC,YAIbnB,EAAAoB,IAACC,EAAS,QAAA,CACRC,OAAO,SACPC,WACA,EAAAC,GAAG,QACHC,MAAM,gBACNC,KAAK,QACLC,aAAa,QACbC,WACA,EAAAC,SAAU3C,EACV4C,KAAK,QACLC,WAAY,CAAEC,KAAM,SACpB7C,QAASE,EACT4C,WAAY5C,IAEdW,EAAAoB,IAACC,EAAS,QACR,CAAAC,OAAO,SACPC,aACAS,KAAK,QACLN,KAAK,WACLD,MAAM,WACNK,KAAK,WACLN,GAAG,WACHK,SAAU3C,EACVyC,aAAa,mBACbI,WAAY,CAAEC,KAAM,SACpB7C,QAASK,EACTyC,WAAYzC,IAEdQ,EAAAA,IAACkC,EAAa,SACZJ,KAAK,SACLP,WAAS,EACTpB,QAAQ,YACRjB,QAASA,EACT2C,SAAU3C,EACV8C,KAAK,SACLG,GAAI,CAAEC,GAAI,GAGIxC,SAAA,iBAGpB"}

package/sign-in/cjs/package.json

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

package/sign-in/index.js

@@ -1,2 +1,2 @@
-import e,{useState as t}from"react";import{Box as r,Typography as a,Stack as l,Alert as n,TextField as i}from"@mui/material";import{LoadingButton as o}from"@mui/lab";const m=({title:m,subtitle:s,loading:d,error:p,onSubmitSignIn:u})=>{const[c,g]=t(""),[f,b]=t("");return e.createElement(e.Fragment,null,e.createElement(r,{marginBottom:2},e.createElement(a,{component:"h1",variant:"h4"},m),e.createElement(a,{variant:"body1"},s)),e.createElement(r,{component:"form",onSubmit:function(e){e.preventDefault(),g(""),b("");const t=new FormData(e.currentTarget),r=t.get("email")?.toString(),a=t.get("password")?.toString();r||g("Please fill out this field"),a||b("Please fill out this field"),r&&a&&u(r,a)}},p&&e.createElement(l,{width:"100%",marginTop:1},e.createElement(n,{variant:"filled",severity:"error"},p.message)),e.createElement(i,{margin:"normal",fullWidth:!0,id:"email",label:"Email Address",name:"email",autoComplete:"email",autoFocus:!0,disabled:d,type:"email",inputProps:{role:"input"},error:!!c,helperText:c}),e.createElement(i,{margin:"normal",fullWidth:!0,role:"input",name:"password",label:"Password",type:"password",id:"password",disabled:d,autoComplete:"current-password",inputProps:{role:"input"},error:!!f,helperText:f}),e.createElement(o,{type:"submit",fullWidth:!0,variant:"contained",loading:d,disabled:d,role:"button",sx:{mt:2}},"Sign In")))};export{m as SignIn};
+import{jsxs as r,Fragment as t,jsx as e}from"react/jsx-runtime";import{useState as i}from"react";import o from"@mui/material/Stack";import a from"@mui/material/Box";import l from"@mui/material/TextField";import n from"@mui/material/Typography";import m from"@mui/material/Alert";import d from"@mui/lab/LoadingButton";const p=({title:p,subtitle:s,loading:u,error:c,onSubmitSignIn:f})=>{const[h,g]=i(""),[b,w]=i("");return r(t,{children:[r(a,{marginBottom:2,children:[e(n,{component:"h1",variant:"h4",children:p}),e(n,{variant:"body1",children:s})]}),r(a,{component:"form",onSubmit:function(r){r.preventDefault(),g(""),w("");const t=new FormData(r.currentTarget),e=t.get("email")?.toString(),i=t.get("password")?.toString();e||g("Please fill out this field"),i||w("Please fill out this field"),e&&i&&f(e,i)},children:[c&&e(o,{width:"100%",marginTop:1,children:e(m,{variant:"filled",severity:"error",children:c.message})}),e(l,{margin:"normal",fullWidth:!0,id:"email",label:"Email Address",name:"email",autoComplete:"email",autoFocus:!0,disabled:u,type:"email",inputProps:{role:"input"},error:!!h,helperText:h}),e(l,{margin:"normal",fullWidth:!0,role:"input",name:"password",label:"Password",type:"password",id:"password",disabled:u,autoComplete:"current-password",inputProps:{role:"input"},error:!!b,helperText:b}),e(d,{type:"submit",fullWidth:!0,variant:"contained",loading:u,disabled:u,role:"button",sx:{mt:2},children:"Sign In"})]})]})};export{p as SignIn};
 //# sourceMappingURL=index.js.map

package/sign-in/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/sign-in/sign-in.tsx"],"sourcesContent":["import React, { FormEvent, useState } from \"react\";\nimport { Stack, Box, TextField, Typography, Alert } from \"@mui/material\";\nimport { LoadingButton } from \"@mui/lab\";\n\nexport interface SignInProps {\n  title: string;\n  subtitle: string;\n  error?: Error;\n  loading?: boolean;\n  onSubmitSignIn: (email: string, password: string) => void;\n}\n\nexport const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {\n  const [emailError, setEmailError] = useState(\"\");\n  const [passwordError, setPasswordError] = useState(\"\");\n\n  function handleSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    setEmailError(\"\");\n    setPasswordError(\"\");\n\n    const data = new FormData(e.currentTarget);\n    const email = data.get(\"email\")?.toString();\n    const password = data.get(\"password\")?.toString();\n\n    if (!email) {\n      setEmailError(\"Please fill out this field\");\n    }\n\n    if (!password) {\n      setPasswordError(\"Please fill out this field\");\n    }\n\n    if (email && password) {\n      onSubmitSignIn(email, password);\n    }\n  }\n\n  return (\n    <>\n      <Box marginBottom={2}>\n        <Typography component=\"h1\" variant=\"h4\">\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{subtitle}</Typography>\n      </Box>\n      <Box component=\"form\" onSubmit={handleSubmit}>\n        {error && (\n          <Stack width=\"100%\" marginTop={1}>\n            <Alert variant=\"filled\" severity=\"error\">\n              {error.message}\n            </Alert>\n          </Stack>\n        )}\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          id=\"email\"\n          label=\"Email Address\"\n          name=\"email\"\n          autoComplete=\"email\"\n          autoFocus\n          disabled={loading}\n          type=\"email\"\n          inputProps={{ role: \"input\" }}\n          error={!!emailError}\n          helperText={emailError}\n        />\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          role=\"input\"\n          name=\"password\"\n          label=\"Password\"\n          type=\"password\"\n          id=\"password\"\n          disabled={loading}\n          autoComplete=\"current-password\"\n          inputProps={{ role: \"input\" }}\n          error={!!passwordError}\n          helperText={passwordError}\n        />\n        <LoadingButton\n          type=\"submit\"\n          fullWidth\n          variant=\"contained\"\n          loading={loading}\n          disabled={loading}\n          role=\"button\"\n          sx={{ mt: 2 }}\n        >\n          Sign In\n        </LoadingButton>\n      </Box>\n    </>\n  );\n};\n"],"names":["SignIn","title","subtitle","loading","error","onSubmitSignIn","emailError","setEmailError","useState","passwordError","setPasswordError","React","createElement","Fragment","Box","marginBottom","Typography","component","variant","onSubmit","e","preventDefault","data","FormData","currentTarget","email","get","toString","password","Stack","width","marginTop","Alert","severity","message","TextField","margin","fullWidth","id","label","name","autoComplete","autoFocus","disabled","type","inputProps","role","helperText","LoadingButton","sx","mt"],"mappings":"sKAYa,MAAAA,EAAS,EAAGC,QAAOC,WAAUC,UAASC,QAAOC,qBACxD,MAAOC,EAAYC,GAAiBC,EAAS,KACtCC,EAAeC,GAAoBF,EAAS,IAwBnD,OACEG,EAAAC,cAAAD,EAAAE,SAAA,KACEF,EAAAC,cAACE,EAAG,CAACC,aAAc,GACjBJ,EAACC,cAAAI,EAAW,CAAAC,UAAU,KAAKC,QAAQ,MAChCjB,GAEHU,EAACC,cAAAI,GAAWE,QAAQ,SAAShB,IAE/BS,EAACC,cAAAE,GAAIG,UAAU,OAAOE,SA9B1B,SAAsBC,GACpBA,EAAEC,iBACFd,EAAc,IACdG,EAAiB,IAEjB,MAAMY,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAAQH,EAAKI,IAAI,UAAUC,WAC3BC,EAAWN,EAAKI,IAAI,aAAaC,WAElCF,GACHlB,EAAc,8BAGXqB,GACHlB,EAAiB,8BAGfe,GAASG,GACXvB,EAAeoB,EAAOG,EAEzB,GAWMxB,GACCO,EAAAC,cAACiB,EAAK,CAACC,MAAM,OAAOC,UAAW,GAC7BpB,EAAAC,cAACoB,EAAK,CAACd,QAAQ,SAASe,SAAS,SAC9B7B,EAAM8B,UAIbvB,EAACC,cAAAuB,GACCC,OAAO,SACPC,WACA,EAAAC,GAAG,QACHC,MAAM,gBACNC,KAAK,QACLC,aAAa,QACbC,aACAC,SAAUxC,EACVyC,KAAK,QACLC,WAAY,CAAEC,KAAM,SACpB1C,QAASE,EACTyC,WAAYzC,IAEdK,EAACC,cAAAuB,EACC,CAAAC,OAAO,SACPC,WAAS,EACTS,KAAK,QACLN,KAAK,WACLD,MAAM,WACNK,KAAK,WACLN,GAAG,WACHK,SAAUxC,EACVsC,aAAa,mBACbI,WAAY,CAAEC,KAAM,SACpB1C,QAASK,EACTsC,WAAYtC,IAEdE,EAAAC,cAACoC,EAAa,CACZJ,KAAK,SACLP,WACA,EAAAnB,QAAQ,YACRf,QAASA,EACTwC,SAAUxC,EACV2C,KAAK,SACLG,GAAI,CAAEC,GAAI,IAAG,YAMnB"}
+{"version":3,"file":"index.js","sources":["../../src/sign-in/sign-in.tsx"],"sourcesContent":["import { FormEvent, useState } from \"react\";\nimport Stack from \"@mui/material/Stack\";\nimport Box from \"@mui/material/Box\";\nimport TextField from \"@mui/material/TextField\";\nimport Typography from \"@mui/material/Typography\";\nimport Alert from \"@mui/material/Alert\";\nimport LoadingButton from \"@mui/lab/LoadingButton\";\n\nexport interface SignInProps {\n  title: string;\n  subtitle: string;\n  error?: Error;\n  loading?: boolean;\n  onSubmitSignIn: (email: string, password: string) => void;\n}\n\nexport const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {\n  const [emailError, setEmailError] = useState(\"\");\n  const [passwordError, setPasswordError] = useState(\"\");\n\n  function handleSubmit(e: FormEvent<HTMLFormElement>) {\n    e.preventDefault();\n    setEmailError(\"\");\n    setPasswordError(\"\");\n\n    const data = new FormData(e.currentTarget);\n    const email = data.get(\"email\")?.toString();\n    const password = data.get(\"password\")?.toString();\n\n    if (!email) {\n      setEmailError(\"Please fill out this field\");\n    }\n\n    if (!password) {\n      setPasswordError(\"Please fill out this field\");\n    }\n\n    if (email && password) {\n      onSubmitSignIn(email, password);\n    }\n  }\n\n  return (\n    <>\n      <Box marginBottom={2}>\n        <Typography component=\"h1\" variant=\"h4\">\n          {title}\n        </Typography>\n        <Typography variant=\"body1\">{subtitle}</Typography>\n      </Box>\n      <Box component=\"form\" onSubmit={handleSubmit}>\n        {error && (\n          <Stack width=\"100%\" marginTop={1}>\n            <Alert variant=\"filled\" severity=\"error\">\n              {error.message}\n            </Alert>\n          </Stack>\n        )}\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          id=\"email\"\n          label=\"Email Address\"\n          name=\"email\"\n          autoComplete=\"email\"\n          autoFocus\n          disabled={loading}\n          type=\"email\"\n          inputProps={{ role: \"input\" }}\n          error={!!emailError}\n          helperText={emailError}\n        />\n        <TextField\n          margin=\"normal\"\n          fullWidth\n          role=\"input\"\n          name=\"password\"\n          label=\"Password\"\n          type=\"password\"\n          id=\"password\"\n          disabled={loading}\n          autoComplete=\"current-password\"\n          inputProps={{ role: \"input\" }}\n          error={!!passwordError}\n          helperText={passwordError}\n        />\n        <LoadingButton\n          type=\"submit\"\n          fullWidth\n          variant=\"contained\"\n          loading={loading}\n          disabled={loading}\n          role=\"button\"\n          sx={{ mt: 2 }}\n        >\n          Sign In\n        </LoadingButton>\n      </Box>\n    </>\n  );\n};\n"],"names":["SignIn","title","subtitle","loading","error","onSubmitSignIn","emailError","setEmailError","useState","passwordError","setPasswordError","_jsxs","_Fragment","children","Box","marginBottom","_jsx","Typography","component","variant","onSubmit","e","preventDefault","data","FormData","currentTarget","email","get","toString","password","Stack","width","marginTop","Alert","severity","message","TextField","margin","fullWidth","id","label","name","autoComplete","autoFocus","disabled","type","inputProps","role","helperText","LoadingButton","sx","mt"],"mappings":"6TAgBa,MAAAA,EAAS,EAAGC,QAAOC,WAAUC,UAASC,QAAOC,qBACxD,MAAOC,EAAYC,GAAiBC,EAAS,KACtCC,EAAeC,GAAoBF,EAAS,IAwBnD,OACEG,EACEC,EAAA,CAAAC,SAAA,CAAAF,EAACG,EAAG,CAACC,aAAc,EACjBF,SAAA,CAAAG,EAACC,EAAU,CAACC,UAAU,KAAKC,QAAQ,cAChClB,IAEHe,EAACC,EAAU,CAACE,QAAQ,QAASN,SAAAX,OAE/BS,EAACG,EAAI,CAAAI,UAAU,OAAOE,SA9B1B,SAAsBC,GACpBA,EAAEC,iBACFf,EAAc,IACdG,EAAiB,IAEjB,MAAMa,EAAO,IAAIC,SAASH,EAAEI,eACtBC,EAAQH,EAAKI,IAAI,UAAUC,WAC3BC,EAAWN,EAAKI,IAAI,aAAaC,WAElCF,GACHnB,EAAc,8BAGXsB,GACHnB,EAAiB,8BAGfgB,GAASG,GACXxB,EAAeqB,EAAOG,EAEzB,EAU+ChB,SAAA,CACzCT,GACCY,EAACc,EAAM,CAAAC,MAAM,OAAOC,UAAW,EAACnB,SAC9BG,EAACiB,GAAMd,QAAQ,SAASe,SAAS,QAC9BrB,SAAAT,EAAM+B,YAIbnB,EAACoB,EAAS,CACRC,OAAO,SACPC,WACA,EAAAC,GAAG,QACHC,MAAM,gBACNC,KAAK,QACLC,aAAa,QACbC,WACA,EAAAC,SAAUzC,EACV0C,KAAK,QACLC,WAAY,CAAEC,KAAM,SACpB3C,QAASE,EACT0C,WAAY1C,IAEdU,EAACoB,EACC,CAAAC,OAAO,SACPC,aACAS,KAAK,QACLN,KAAK,WACLD,MAAM,WACNK,KAAK,WACLN,GAAG,WACHK,SAAUzC,EACVuC,aAAa,mBACbI,WAAY,CAAEC,KAAM,SACpB3C,QAASK,EACTuC,WAAYvC,IAEdO,EAACiC,GACCJ,KAAK,SACLP,WAAS,EACTnB,QAAQ,YACRhB,QAASA,EACTyC,SAAUzC,EACV4C,KAAK,SACLG,GAAI,CAAEC,GAAI,GAGItC,SAAA,iBAGpB"}

package/sign-in/package.json

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

package/skeleton-card/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("@mui/material/Box"),a=require("@mui/material/Skeleton");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=i(t),n=i(a);exports.SkeletonCard=({width:t="100%",animation:a=!1})=>e.jsxs(r.default,{width:t,children:[e.jsx(n.default,{animation:a,variant:"rectangular",height:118}),e.jsx(n.default,{animation:a,variant:"rectangular",height:16,sx:{my:1}}),e.jsx(n.default,{animation:a,variant:"rectangular",width:"80%",height:16})]});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/skeleton-card/skeleton-card.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Skeleton from \"@mui/material/Skeleton\";\n\nexport interface SkeletonCardProps {\n  width?: number | string;\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\nexport const SkeletonCard = ({ width = \"100%\", animation = false }: SkeletonCardProps) => {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton animation={animation} variant=\"rectangular\" height={16} sx={{ my: 1 }} />\n      <Skeleton animation={animation} variant=\"rectangular\" width=\"80%\" height={16} />\n    </Box>\n  );\n};\n"],"names":["width","animation","_jsxs","jsxs","Box","children","_jsx","Skeleton","variant","height","sx","my","jsx"],"mappings":"yRAQ4B,EAAGA,QAAQ,OAAQC,aAAY,KAEvDC,EAAAC,KAACC,UAAG,CAACJ,MAAOA,EACVK,SAAA,CAAAC,EAAAA,IAACC,EAAQ,QAAA,CAACN,UAAWA,EAAWO,QAAQ,cAAcC,OAAQ,MAC9DH,EAAAA,IAACC,EAAQ,QAAA,CAACN,UAAWA,EAAWO,QAAQ,cAAcC,OAAQ,GAAIC,GAAI,CAAEC,GAAI,KAC5EL,EAAAM,IAACL,UAAS,CAAAN,UAAWA,EAAWO,QAAQ,cAAcR,MAAM,MAAMS,OAAQ"}

package/skeleton-card/cjs/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@pautena/react-design-system/skeleton-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/skeleton-card/index.js

@@ -1,2 +1,2 @@
-import{Box as t,Skeleton as a}from"@mui/material";import e from"react";const i=({width:i="100%",animation:r=!1})=>e.createElement(t,{width:i},e.createElement(a,{animation:r,variant:"rectangular",height:118}),e.createElement(a,{animation:r,variant:"rectangular",height:16,sx:{my:1}}),e.createElement(a,{animation:r,variant:"rectangular",width:"80%",height:16}));export{i as SkeletonCard};
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import a from"@mui/material/Box";import r from"@mui/material/Skeleton";const n=({width:n="100%",animation:m=!1})=>i(a,{width:n,children:[t(r,{animation:m,variant:"rectangular",height:118}),t(r,{animation:m,variant:"rectangular",height:16,sx:{my:1}}),t(r,{animation:m,variant:"rectangular",width:"80%",height:16})]});export{n as SkeletonCard};
 //# sourceMappingURL=index.js.map

package/skeleton-card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/skeleton-card/skeleton-card.tsx"],"sourcesContent":["import { Box, Skeleton } from \"@mui/material\";\nimport React from \"react\";\n\nexport interface SkeletonCardProps {\n  width?: number | string;\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\nexport const SkeletonCard = ({ width = \"100%\", animation = false }: SkeletonCardProps) => {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton animation={animation} variant=\"rectangular\" height={16} sx={{ my: 1 }} />\n      <Skeleton animation={animation} variant=\"rectangular\" width=\"80%\" height={16} />\n    </Box>\n  );\n};\n"],"names":["SkeletonCard","width","animation","React","createElement","Box","Skeleton","variant","height","sx","my"],"mappings":"uEAQO,MAAMA,EAAe,EAAGC,QAAQ,OAAQC,aAAY,KAEvDC,EAACC,cAAAC,EAAI,CAAAJ,MAAOA,GACVE,EAAAC,cAACE,EAAQ,CAACJ,UAAWA,EAAWK,QAAQ,cAAcC,OAAQ,MAC9DL,EAACC,cAAAE,GAASJ,UAAWA,EAAWK,QAAQ,cAAcC,OAAQ,GAAIC,GAAI,CAAEC,GAAI,KAC5EP,EAACC,cAAAE,GAASJ,UAAWA,EAAWK,QAAQ,cAAcN,MAAM,MAAMO,OAAQ"}
+{"version":3,"file":"index.js","sources":["../../src/skeleton-card/skeleton-card.tsx"],"sourcesContent":["import Box from \"@mui/material/Box\";\nimport Skeleton from \"@mui/material/Skeleton\";\n\nexport interface SkeletonCardProps {\n  width?: number | string;\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\nexport const SkeletonCard = ({ width = \"100%\", animation = false }: SkeletonCardProps) => {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton animation={animation} variant=\"rectangular\" height={16} sx={{ my: 1 }} />\n      <Skeleton animation={animation} variant=\"rectangular\" width=\"80%\" height={16} />\n    </Box>\n  );\n};\n"],"names":["SkeletonCard","width","animation","_jsxs","Box","children","_jsx","Skeleton","variant","height","sx","my"],"mappings":"yHAQO,MAAMA,EAAe,EAAGC,QAAQ,OAAQC,aAAY,KAEvDC,EAACC,EAAG,CAACH,MAAOA,EACVI,SAAA,CAAAC,EAACC,EAAQ,CAACL,UAAWA,EAAWM,QAAQ,cAAcC,OAAQ,MAC9DH,EAACC,EAAQ,CAACL,UAAWA,EAAWM,QAAQ,cAAcC,OAAQ,GAAIC,GAAI,CAAEC,GAAI,KAC5EL,EAACC,EAAS,CAAAL,UAAWA,EAAWM,QAAQ,cAAcP,MAAM,MAAMQ,OAAQ"}

package/skeleton-card/package.json

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

package/skeleton-grid/cjs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/material/Grid");require("@mui/material");var t=require("@mui/material/Box"),a=require("@mui/material/Skeleton");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(i),u=r(t),l=r(a);const d=(e,i)=>new Array(e).fill(i),s=({width:i="100%",animation:t=!1})=>e.jsxs(u.default,{width:i,children:[e.jsx(l.default,{animation:t,variant:"rectangular",height:118}),e.jsx(l.default,{animation:t,variant:"rectangular",height:16,sx:{my:1}}),e.jsx(l.default,{animation:t,variant:"rectangular",width:"80%",height:16})]});exports.SkeletonGrid=({size:i=20})=>e.jsx(n.default,{container:!0,spacing:2,children:d(i,0).map(((i,t)=>e.jsx(n.default,{item:!0,xs:4,children:e.jsx(s,{width:1})},t)))});
+//# sourceMappingURL=index.js.map

package/skeleton-grid/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/utils/arrays.ts","../../../src/skeleton-card/skeleton-card.tsx","../../../src/skeleton-grid/skeleton-grid.tsx"],"sourcesContent":["export const newArrayWithSize = <T>(size: number, fillValue: T) => new Array(size).fill(fillValue);\n\nexport const getRandomItem = <T>(items: T[]): { index: number; item: T } => {\n  const index = Math.floor(Math.random() * items.length);\n  const item = items[index];\n  return { index, item };\n};\n","import Box from \"@mui/material/Box\";\nimport Skeleton from \"@mui/material/Skeleton\";\n\nexport interface SkeletonCardProps {\n  width?: number | string;\n  animation?: \"pulse\" | \"wave\" | false;\n}\n\nexport const SkeletonCard = ({ width = \"100%\", animation = false }: SkeletonCardProps) => {\n  return (\n    <Box width={width}>\n      <Skeleton animation={animation} variant=\"rectangular\" height={118} />\n      <Skeleton animation={animation} variant=\"rectangular\" height={16} sx={{ my: 1 }} />\n      <Skeleton animation={animation} variant=\"rectangular\" width=\"80%\" height={16} />\n    </Box>\n  );\n};\n","import Grid from \"@mui/material/Grid\";\nimport { newArrayWithSize } from \"~/utils\";\nimport { SkeletonCard } from \"~/skeleton-card\";\n\nexport interface SkeletonGridProps {\n  size?: number;\n}\n\nexport const SkeletonGrid = ({ size = 20 }: SkeletonGridProps) => {\n  return (\n    <Grid container spacing={2}>\n      {newArrayWithSize(size, 0).map((_, i) => (\n        <Grid item key={i} xs={4}>\n          <SkeletonCard width={1} />\n        </Grid>\n      ))}\n    </Grid>\n  );\n};\n"],"names":["newArrayWithSize","size","fillValue","Array","fill","SkeletonCard","width","animation","_jsxs","jsxs","Box","children","_jsx","Skeleton","variant","height","sx","my","jsx","Grid","container","spacing","map","_","i","item","xs"],"mappings":"wUAAO,MAAMA,EAAmB,CAAIC,EAAcC,IAAiB,IAAIC,MAAMF,GAAMG,KAAKF,GCQ3EG,EAAe,EAAGC,QAAQ,OAAQC,aAAY,KAEvDC,EAAAC,KAACC,UAAG,CAACJ,MAAOA,EACVK,SAAA,CAAAC,EAAAA,IAACC,EAAQ,QAAA,CAACN,UAAWA,EAAWO,QAAQ,cAAcC,OAAQ,MAC9DH,EAAAA,IAACC,EAAQ,QAAA,CAACN,UAAWA,EAAWO,QAAQ,cAAcC,OAAQ,GAAIC,GAAI,CAAEC,GAAI,KAC5EL,EAAAM,IAACL,UAAS,CAAAN,UAAWA,EAAWO,QAAQ,cAAcR,MAAM,MAAMS,OAAQ,6BCLpD,EAAGd,OAAO,MAElCW,EAAAA,IAACO,EAAAA,QAAI,CAACC,WAAU,EAAAC,QAAS,EACtBV,SAAAX,EAAiBC,EAAM,GAAGqB,KAAI,CAACC,EAAGC,IACjCZ,EAAAA,IAACO,EAAAA,QAAK,CAAAM,QAAaC,GAAI,EAACf,SACtBC,MAACP,GAAaC,MAAO,KADPkB"}