umwd-components 0.1.82 → 0.1.83

package/dist/cjs/components/FeaturesSection.js

@@ -6,28 +6,10 @@
   
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var material = require('@mui/material');
+var getIcon = require('../lib/getIcon.js');
 
-function getIcon(name) {
-  switch (name) {
-    case "CLOCK_ICON":
-      return /*#__PURE__*/React.createElement(ClockIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    case "CHECK_ICON":
-      return /*#__PURE__*/React.createElement(CheckIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    case "CLOUD_ICON":
-      return /*#__PURE__*/React.createElement(CloudIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    default:
-      return null;
-  }
-}
 function FeatureSection(_ref) {
   let {
     data
@@ -49,98 +31,62 @@ function FeatureSection(_ref) {
       width: "100%"
     },
     useFlexGap: true
-  }, feature.map(feature => /*#__PURE__*/React.createElement(material.Card, {
-    key: feature.id,
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      flex: 1,
-      minWidth: "350px"
-    }
-  }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
-    sx: {
-      height: 140,
-      display: "grid",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h5",
-    align: "center",
-    component: "div",
-    sx: {
-      mb: 2
-    }
-  }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "h6",
-    align: "center",
-    component: "div",
-    sx: {
-      mb: 2
-    }
-  }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
-    variant: "body2",
-    color: "text.secondary",
-    component: "div"
-  }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
-    sx: {
-      mb: 0
-    }
-  }, /*#__PURE__*/React.createElement(material.Button, {
-    size: "small"
-  }, "Share"), /*#__PURE__*/React.createElement(material.Button, {
-    size: "small"
-  }, "Learn More"))))));
-}
-function CheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "20 6 9 17 4 12"
-  }));
-}
-function ClockIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "12 6 12 12 16 14"
-  }));
-}
-function CloudIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _rollupPluginBabelHelpers.extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
-  }));
+  }, feature.map(feature => {
+    const Icon = getIcon.default(feature.icon);
+    return /*#__PURE__*/React.createElement(material.Card, {
+      key: feature.id,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        flex: 1,
+        minWidth: "350px"
+      }
+    }, /*#__PURE__*/React.createElement(material.CardContent, null, /*#__PURE__*/React.createElement(material.CardMedia, {
+      sx: {
+        height: 140,
+        display: "grid",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "75px",
+        height: "75px",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 0.5
+      }
+    })), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h5",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.heading), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "h6",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(material.Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, feature.subHeading)), /*#__PURE__*/React.createElement(material.CardActions, {
+      sx: {
+        mb: 0
+      }
+    }, /*#__PURE__*/React.createElement(material.Button, {
+      size: "small"
+    }, "Share"), /*#__PURE__*/React.createElement(material.Button, {
+      size: "small"
+    }, "Learn More")));
+  })));
 }
 
 exports.FeatureSection = FeatureSection;

package/dist/cjs/components/IconSection.js

@@ -8,70 +8,8 @@
 
 var React = require('react');
 var material = require('@mui/material');
-var BedroomBabyIcon = require('@mui/icons-material/BedroomBaby');
-var BedroomParentIcon = require('@mui/icons-material/BedroomParent');
-var MonitorHeartIcon = require('@mui/icons-material/MonitorHeart');
-var VaccinesIcon = require('@mui/icons-material/Vaccines');
-var LocalHospitalIcon = require('@mui/icons-material/LocalHospital');
-var MedicalInformationIcon = require('@mui/icons-material/MedicalInformation');
-var MedicalServicesIcon = require('@mui/icons-material/MedicalServices');
-var ChildCareIcon = require('@mui/icons-material/ChildCare');
-var ScreenshotMonitorIcon = require('@mui/icons-material/ScreenshotMonitor');
-var MedicationIcon = require('@mui/icons-material/Medication');
-var BloodtypeIcon = require('@mui/icons-material/Bloodtype');
-var HealingIcon = require('@mui/icons-material/Healing');
-var LocalPharmacyIcon = require('@mui/icons-material/LocalPharmacy');
-var FlightIcon = require('@mui/icons-material/Flight');
-var AirlineSeatFlatIcon = require('@mui/icons-material/AirlineSeatFlat');
-var AccessibleIcon = require('@mui/icons-material/Accessible');
-var PropaneTankIcon = require('@mui/icons-material/PropaneTank');
-var MasksIcon = require('@mui/icons-material/Masks');
-var BoltIcon = require('@mui/icons-material/Bolt');
+var getIcon = require('../lib/getIcon.js');
 
-function getIcon(icon) {
-  switch (icon) {
-    case "BedroomBabyIcon":
-      return BedroomBabyIcon;
-    case "BedroomParentIcon":
-      return BedroomParentIcon;
-    case "MonitorHeartIcon":
-      return MonitorHeartIcon;
-    case "VaccinesIcon":
-      return VaccinesIcon;
-    case "LocalHospitalIcon":
-      return LocalHospitalIcon;
-    case "MedicalInformationIcon":
-      return MedicalInformationIcon;
-    case "MedicalServicesIcon":
-      return MedicalServicesIcon;
-    case "ChildCareIcon":
-      return ChildCareIcon;
-    case "ScreenshotMonitorIcon":
-      return ScreenshotMonitorIcon;
-    case "MedicationIcon":
-      return MedicationIcon;
-    case "BloodtypeIcon":
-      return BloodtypeIcon;
-    case "HealingIcon":
-      return HealingIcon;
-    case "LocalPharmacyIcon":
-      return LocalPharmacyIcon;
-    case "FlightIcon":
-      return FlightIcon;
-    case "AirlineSeatFlatIcon":
-      return AirlineSeatFlatIcon;
-    case "AccessibleIcon":
-      return AccessibleIcon;
-    case "PropaneTankIcon":
-      return PropaneTankIcon;
-    case "MasksIcon":
-      return MasksIcon;
-    case "BoltIcon":
-      return BoltIcon;
-    default:
-      return null;
-  }
-}
 function IconSection(_ref) {
   let {
     data
@@ -88,7 +26,7 @@ function IconSection(_ref) {
     container: true,
     spacing: 2
   }, icon.map(icon => {
-    const Icon = getIcon(icon.icon);
+    const Icon = getIcon.default(icon.icon);
     return /*#__PURE__*/React.createElement(material.Grid, {
       item: true,
       xs: 12,

package/dist/cjs/lib/getIcon.js

@@ -0,0 +1,79 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var BedroomBabyIcon = require('@mui/icons-material/BedroomBaby');
+var BedroomParentIcon = require('@mui/icons-material/BedroomParent');
+var MonitorHeartIcon = require('@mui/icons-material/MonitorHeart');
+var VaccinesIcon = require('@mui/icons-material/Vaccines');
+var LocalHospitalIcon = require('@mui/icons-material/LocalHospital');
+var MedicalInformationIcon = require('@mui/icons-material/MedicalInformation');
+var MedicalServicesIcon = require('@mui/icons-material/MedicalServices');
+var ChildCareIcon = require('@mui/icons-material/ChildCare');
+var ScreenshotMonitorIcon = require('@mui/icons-material/ScreenshotMonitor');
+var MedicationIcon = require('@mui/icons-material/Medication');
+var BloodtypeIcon = require('@mui/icons-material/Bloodtype');
+var HealingIcon = require('@mui/icons-material/Healing');
+var LocalPharmacyIcon = require('@mui/icons-material/LocalPharmacy');
+var FlightIcon = require('@mui/icons-material/Flight');
+var AirlineSeatFlatIcon = require('@mui/icons-material/AirlineSeatFlat');
+var AccessibleIcon = require('@mui/icons-material/Accessible');
+var PropaneTankIcon = require('@mui/icons-material/PropaneTank');
+var MasksIcon = require('@mui/icons-material/Masks');
+var BoltIcon = require('@mui/icons-material/Bolt');
+var BedIcon = require('@mui/icons-material/Bed');
+
+function getIcon(icon) {
+  switch (icon) {
+    case "BedroomBabyIcon":
+      return BedroomBabyIcon;
+    case "BedroomParentIcon":
+      return BedroomParentIcon;
+    case "MonitorHeartIcon":
+      return MonitorHeartIcon;
+    case "VaccinesIcon":
+      return VaccinesIcon;
+    case "LocalHospitalIcon":
+      return LocalHospitalIcon;
+    case "MedicalInformationIcon":
+      return MedicalInformationIcon;
+    case "MedicalServicesIcon":
+      return MedicalServicesIcon;
+    case "ChildCareIcon":
+      return ChildCareIcon;
+    case "ScreenshotMonitorIcon":
+      return ScreenshotMonitorIcon;
+    case "MedicationIcon":
+      return MedicationIcon;
+    case "BloodtypeIcon":
+      return BloodtypeIcon;
+    case "HealingIcon":
+      return HealingIcon;
+    case "LocalPharmacyIcon":
+      return LocalPharmacyIcon;
+    case "FlightIcon":
+      return FlightIcon;
+    case "AirlineSeatFlatIcon":
+      return AirlineSeatFlatIcon;
+    case "AccessibleIcon":
+      return AccessibleIcon;
+    case "PropaneTankIcon":
+      return PropaneTankIcon;
+    case "MasksIcon":
+      return MasksIcon;
+    case "BoltIcon":
+      return BoltIcon;
+    case "BedIcon":
+      return BedIcon;
+    default:
+      return null;
+  }
+}
+
+exports.default = getIcon;

package/dist/esm/components/FeaturesSection.js

@@ -4,28 +4,10 @@
  * @license MIT
  */
   
-import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
 import { Container, Stack, Card, CardContent, CardMedia, Typography, CardActions, Button } from '@mui/material';
+import getIcon from '../lib/getIcon.js';
 
-function getIcon(name) {
-  switch (name) {
-    case "CLOCK_ICON":
-      return /*#__PURE__*/React.createElement(ClockIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    case "CHECK_ICON":
-      return /*#__PURE__*/React.createElement(CheckIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    case "CLOUD_ICON":
-      return /*#__PURE__*/React.createElement(CloudIcon, {
-        className: "w-12 h-12 mb-4 text-gray-900"
-      });
-    default:
-      return null;
-  }
-}
 function FeatureSection(_ref) {
   let {
     data
@@ -47,98 +29,62 @@ function FeatureSection(_ref) {
       width: "100%"
     },
     useFlexGap: true
-  }, feature.map(feature => /*#__PURE__*/React.createElement(Card, {
-    key: feature.id,
-    sx: {
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "space-between",
-      flex: 1,
-      minWidth: "350px"
-    }
-  }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardMedia, {
-    sx: {
-      height: 140,
-      display: "grid",
-      alignItems: "center",
-      justifyContent: "center"
-    }
-  }, getIcon(feature.icon)), /*#__PURE__*/React.createElement(Typography, {
-    variant: "h5",
-    align: "center",
-    component: "div",
-    sx: {
-      mb: 2
-    }
-  }, feature.heading), /*#__PURE__*/React.createElement(Typography, {
-    variant: "h6",
-    align: "center",
-    component: "div",
-    sx: {
-      mb: 2
-    }
-  }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(Typography, {
-    variant: "body2",
-    color: "text.secondary",
-    component: "div"
-  }, feature.subHeading)), /*#__PURE__*/React.createElement(CardActions, {
-    sx: {
-      mb: 0
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    size: "small"
-  }, "Share"), /*#__PURE__*/React.createElement(Button, {
-    size: "small"
-  }, "Learn More"))))));
-}
-function CheckIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "20 6 9 17 4 12"
-  }));
-}
-function ClockIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }), /*#__PURE__*/React.createElement("polyline", {
-    points: "12 6 12 12 16 14"
-  }));
-}
-function CloudIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({}, props, {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z"
-  }));
+  }, feature.map(feature => {
+    const Icon = getIcon(feature.icon);
+    return /*#__PURE__*/React.createElement(Card, {
+      key: feature.id,
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        flex: 1,
+        minWidth: "350px"
+      }
+    }, /*#__PURE__*/React.createElement(CardContent, null, /*#__PURE__*/React.createElement(CardMedia, {
+      sx: {
+        height: 140,
+        display: "grid",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    }, Icon !== null && /*#__PURE__*/React.createElement(Icon, {
+      sx: {
+        mr: 2,
+        mt: 0.2,
+        width: "75px",
+        height: "75px",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 0.5
+      }
+    })), /*#__PURE__*/React.createElement(Typography, {
+      variant: "h5",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.heading), /*#__PURE__*/React.createElement(Typography, {
+      variant: "h6",
+      align: "center",
+      component: "div",
+      sx: {
+        mb: 2
+      }
+    }, feature.subHeading.substring(0, 50)), /*#__PURE__*/React.createElement(Typography, {
+      variant: "body2",
+      color: "text.secondary",
+      component: "div"
+    }, feature.subHeading)), /*#__PURE__*/React.createElement(CardActions, {
+      sx: {
+        mb: 0
+      }
+    }, /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "Share"), /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "Learn More")));
+  })));
 }
 
 export { FeatureSection };

package/dist/esm/components/IconSection.js

@@ -6,70 +6,8 @@
   
 import React from 'react';
 import { Container, Grid, Card, CardContent, Typography } from '@mui/material';
-import BedroomBabyIcon from '@mui/icons-material/BedroomBaby';
-import BedroomParentIcon from '@mui/icons-material/BedroomParent';
-import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
-import VaccinesIcon from '@mui/icons-material/Vaccines';
-import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
-import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
-import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
-import ChildCareIcon from '@mui/icons-material/ChildCare';
-import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
-import MedicationIcon from '@mui/icons-material/Medication';
-import BloodtypeIcon from '@mui/icons-material/Bloodtype';
-import HealingIcon from '@mui/icons-material/Healing';
-import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
-import FlightIcon from '@mui/icons-material/Flight';
-import AirlineSeatFlatIcon from '@mui/icons-material/AirlineSeatFlat';
-import AccessibleIcon from '@mui/icons-material/Accessible';
-import PropaneTankIcon from '@mui/icons-material/PropaneTank';
-import MasksIcon from '@mui/icons-material/Masks';
-import BoltIcon from '@mui/icons-material/Bolt';
+import getIcon from '../lib/getIcon.js';
 
-function getIcon(icon) {
-  switch (icon) {
-    case "BedroomBabyIcon":
-      return BedroomBabyIcon;
-    case "BedroomParentIcon":
-      return BedroomParentIcon;
-    case "MonitorHeartIcon":
-      return MonitorHeartIcon;
-    case "VaccinesIcon":
-      return VaccinesIcon;
-    case "LocalHospitalIcon":
-      return LocalHospitalIcon;
-    case "MedicalInformationIcon":
-      return MedicalInformationIcon;
-    case "MedicalServicesIcon":
-      return MedicalServicesIcon;
-    case "ChildCareIcon":
-      return ChildCareIcon;
-    case "ScreenshotMonitorIcon":
-      return ScreenshotMonitorIcon;
-    case "MedicationIcon":
-      return MedicationIcon;
-    case "BloodtypeIcon":
-      return BloodtypeIcon;
-    case "HealingIcon":
-      return HealingIcon;
-    case "LocalPharmacyIcon":
-      return LocalPharmacyIcon;
-    case "FlightIcon":
-      return FlightIcon;
-    case "AirlineSeatFlatIcon":
-      return AirlineSeatFlatIcon;
-    case "AccessibleIcon":
-      return AccessibleIcon;
-    case "PropaneTankIcon":
-      return PropaneTankIcon;
-    case "MasksIcon":
-      return MasksIcon;
-    case "BoltIcon":
-      return BoltIcon;
-    default:
-      return null;
-  }
-}
 function IconSection(_ref) {
   let {
     data

package/dist/esm/lib/getIcon.js

@@ -0,0 +1,75 @@
+/*
+ * UMWD-Components
+ * @copyright Jelle Paulus
+ * @license MIT
+ */
+  
+import BedroomBabyIcon from '@mui/icons-material/BedroomBaby';
+import BedroomParentIcon from '@mui/icons-material/BedroomParent';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
+import VaccinesIcon from '@mui/icons-material/Vaccines';
+import LocalHospitalIcon from '@mui/icons-material/LocalHospital';
+import MedicalInformationIcon from '@mui/icons-material/MedicalInformation';
+import MedicalServicesIcon from '@mui/icons-material/MedicalServices';
+import ChildCareIcon from '@mui/icons-material/ChildCare';
+import ScreenshotMonitorIcon from '@mui/icons-material/ScreenshotMonitor';
+import MedicationIcon from '@mui/icons-material/Medication';
+import BloodtypeIcon from '@mui/icons-material/Bloodtype';
+import HealingIcon from '@mui/icons-material/Healing';
+import LocalPharmacyIcon from '@mui/icons-material/LocalPharmacy';
+import FlightIcon from '@mui/icons-material/Flight';
+import AirlineSeatFlatIcon from '@mui/icons-material/AirlineSeatFlat';
+import AccessibleIcon from '@mui/icons-material/Accessible';
+import PropaneTankIcon from '@mui/icons-material/PropaneTank';
+import MasksIcon from '@mui/icons-material/Masks';
+import BoltIcon from '@mui/icons-material/Bolt';
+import BedIcon from '@mui/icons-material/Bed';
+
+function getIcon(icon) {
+  switch (icon) {
+    case "BedroomBabyIcon":
+      return BedroomBabyIcon;
+    case "BedroomParentIcon":
+      return BedroomParentIcon;
+    case "MonitorHeartIcon":
+      return MonitorHeartIcon;
+    case "VaccinesIcon":
+      return VaccinesIcon;
+    case "LocalHospitalIcon":
+      return LocalHospitalIcon;
+    case "MedicalInformationIcon":
+      return MedicalInformationIcon;
+    case "MedicalServicesIcon":
+      return MedicalServicesIcon;
+    case "ChildCareIcon":
+      return ChildCareIcon;
+    case "ScreenshotMonitorIcon":
+      return ScreenshotMonitorIcon;
+    case "MedicationIcon":
+      return MedicationIcon;
+    case "BloodtypeIcon":
+      return BloodtypeIcon;
+    case "HealingIcon":
+      return HealingIcon;
+    case "LocalPharmacyIcon":
+      return LocalPharmacyIcon;
+    case "FlightIcon":
+      return FlightIcon;
+    case "AirlineSeatFlatIcon":
+      return AirlineSeatFlatIcon;
+    case "AccessibleIcon":
+      return AccessibleIcon;
+    case "PropaneTankIcon":
+      return PropaneTankIcon;
+    case "MasksIcon":
+      return MasksIcon;
+    case "BoltIcon":
+      return BoltIcon;
+    case "BedIcon":
+      return BedIcon;
+    default:
+      return null;
+  }
+}
+
+export { getIcon as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.82",
+  "version": "0.1.83",
   "description": "UMWD Component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/FeaturesSection.tsx

@@ -9,19 +9,7 @@ import {
   CardActions,
   Button,
 } from "@mui/material";
-
-function getIcon(name: string) {
-  switch (name) {
-    case "CLOCK_ICON":
-      return <ClockIcon className="w-12 h-12 mb-4 text-gray-900" />;
-    case "CHECK_ICON":
-      return <CheckIcon className="w-12 h-12 mb-4 text-gray-900" />;
-    case "CLOUD_ICON":
-      return <CloudIcon className="w-12 h-12 mb-4 text-gray-900" />;
-    default:
-      return null;
-  }
-}
+import getIcon from "../lib/getIcon.ts";
 
 interface FeatureProps {
   id: number;
@@ -55,117 +43,74 @@ export function FeatureSection({
         sx={{ width: "100%" }}
         useFlexGap={true}
       >
-        {feature.map((feature) => (
-          <Card
-            key={feature.id}
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-between",
-              flex: 1,
-              minWidth: "350px",
-            }}
-          >
-            <CardContent>
-              <CardMedia
-                sx={{
-                  height: 140,
-                  display: "grid",
-                  alignItems: "center",
-                  justifyContent: "center",
-                }}
-              >
-                {getIcon(feature.icon)}
-              </CardMedia>
-              <Typography
-                variant="h5"
-                align="center"
-                component="div"
-                sx={{ mb: 2 }}
-              >
-                {feature.heading}
-              </Typography>
-              <Typography
-                variant="h6"
-                align="center"
-                component="div"
-                sx={{ mb: 2 }}
-              >
-                {feature.subHeading.substring(0, 50)}
-              </Typography>
-              <Typography
-                variant="body2"
-                color="text.secondary"
-                component="div"
-              >
-                {feature.subHeading}
-              </Typography>
-            </CardContent>
-            <CardActions sx={{ mb: 0 }}>
-              <Button size="small">Share</Button>
-              <Button size="small">Learn More</Button>
-            </CardActions>
-          </Card>
-        ))}
+        {feature.map((feature) => {
+          const Icon = getIcon(feature.icon) as React.ElementType | null;
+          return (
+            <Card
+              key={feature.id}
+              sx={{
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "space-between",
+                flex: 1,
+                minWidth: "350px",
+              }}
+            >
+              <CardContent>
+                <CardMedia
+                  sx={{
+                    height: 140,
+                    display: "grid",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {Icon !== null && (
+                    <Icon
+                      sx={{
+                        mr: 2,
+                        mt: 0.2,
+                        width: "75px",
+                        height: "75px",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: 0.5,
+                      }}
+                    />
+                  )}
+                </CardMedia>
+                <Typography
+                  variant="h5"
+                  align="center"
+                  component="div"
+                  sx={{ mb: 2 }}
+                >
+                  {feature.heading}
+                </Typography>
+                <Typography
+                  variant="h6"
+                  align="center"
+                  component="div"
+                  sx={{ mb: 2 }}
+                >
+                  {feature.subHeading.substring(0, 50)}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color="text.secondary"
+                  component="div"
+                >
+                  {feature.subHeading}
+                </Typography>
+              </CardContent>
+              <CardActions sx={{ mb: 0 }}>
+                <Button size="small">Share</Button>
+                <Button size="small">Learn More</Button>
+              </CardActions>
+            </Card>
+          );
+        })}
       </Stack>
     </Container>
   );
 }
-
-function CheckIcon(props: any) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="20 6 9 17 4 12" />
-    </svg>
-  );
-}
-
-function ClockIcon(props: any) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <circle cx="12" cy="12" r="10" />
-      <polyline points="12 6 12 12 16 14" />
-    </svg>
-  );
-}
-
-function CloudIcon(props: any) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
-    </svg>
-  );
-}

package/src/components/IconSection.tsx

@@ -1,34 +1,6 @@
 import React from "react";
-import {
-  Stack,
-  Grid,
-  Card,
-  CardContent,
-  Typography,
-  Container,
-  SvgIcon,
-  Divider,
-} from "@mui/material";
-
-import BedroomBabyIcon from "@mui/icons-material/BedroomBaby";
-import BedroomParentIcon from "@mui/icons-material/BedroomParent";
-import MonitorHeartIcon from "@mui/icons-material/MonitorHeart";
-import VaccinesIcon from "@mui/icons-material/Vaccines";
-import LocalHospitalIcon from "@mui/icons-material/LocalHospital";
-import MedicalInformationIcon from "@mui/icons-material/MedicalInformation";
-import MedicalServicesIcon from "@mui/icons-material/MedicalServices";
-import ChildCareIcon from "@mui/icons-material/ChildCare";
-import ScreenshotMonitorIcon from "@mui/icons-material/ScreenshotMonitor";
-import MedicationIcon from "@mui/icons-material/Medication";
-import BloodtypeIcon from "@mui/icons-material/Bloodtype";
-import HealingIcon from "@mui/icons-material/Healing";
-import LocalPharmacyIcon from "@mui/icons-material/LocalPharmacy";
-import FlightIcon from "@mui/icons-material/Flight";
-import AirlineSeatFlatIcon from "@mui/icons-material/AirlineSeatFlat";
-import AccessibleIcon from "@mui/icons-material/Accessible";
-import PropaneTankIcon from "@mui/icons-material/PropaneTank";
-import MasksIcon from "@mui/icons-material/Masks";
-import BoltIcon from "@mui/icons-material/Bolt";
+import { Grid, Card, CardContent, Typography, Container } from "@mui/material";
+import getIcon from "../lib/getIcon.ts";
 
 interface IconProps {
   id: number;
@@ -45,51 +17,6 @@ interface IconSectionProps {
   icon: IconProps[];
 }
 
-function getIcon(icon: string): React.ElementType | null {
-  switch (icon) {
-    case "BedroomBabyIcon":
-      return BedroomBabyIcon;
-    case "BedroomParentIcon":
-      return BedroomParentIcon;
-    case "MonitorHeartIcon":
-      return MonitorHeartIcon;
-    case "VaccinesIcon":
-      return VaccinesIcon;
-    case "LocalHospitalIcon":
-      return LocalHospitalIcon;
-    case "MedicalInformationIcon":
-      return MedicalInformationIcon;
-    case "MedicalServicesIcon":
-      return MedicalServicesIcon;
-    case "ChildCareIcon":
-      return ChildCareIcon;
-    case "ScreenshotMonitorIcon":
-      return ScreenshotMonitorIcon;
-    case "MedicationIcon":
-      return MedicationIcon;
-    case "BloodtypeIcon":
-      return BloodtypeIcon;
-    case "HealingIcon":
-      return HealingIcon;
-    case "LocalPharmacyIcon":
-      return LocalPharmacyIcon;
-    case "FlightIcon":
-      return FlightIcon;
-    case "AirlineSeatFlatIcon":
-      return AirlineSeatFlatIcon;
-    case "AccessibleIcon":
-      return AccessibleIcon;
-    case "PropaneTankIcon":
-      return PropaneTankIcon;
-    case "MasksIcon":
-      return MasksIcon;
-    case "BoltIcon":
-      return BoltIcon;
-    default:
-      return null;
-  }
-}
-
 export function IconSection({ data }: { readonly data: IconSectionProps }) {
   const { icon } = data;
 

package/src/lib/getIcon.ts

@@ -0,0 +1,67 @@
+import BedroomBabyIcon from "@mui/icons-material/BedroomBaby";
+import BedroomParentIcon from "@mui/icons-material/BedroomParent";
+import MonitorHeartIcon from "@mui/icons-material/MonitorHeart";
+import VaccinesIcon from "@mui/icons-material/Vaccines";
+import LocalHospitalIcon from "@mui/icons-material/LocalHospital";
+import MedicalInformationIcon from "@mui/icons-material/MedicalInformation";
+import MedicalServicesIcon from "@mui/icons-material/MedicalServices";
+import ChildCareIcon from "@mui/icons-material/ChildCare";
+import ScreenshotMonitorIcon from "@mui/icons-material/ScreenshotMonitor";
+import MedicationIcon from "@mui/icons-material/Medication";
+import BloodtypeIcon from "@mui/icons-material/Bloodtype";
+import HealingIcon from "@mui/icons-material/Healing";
+import LocalPharmacyIcon from "@mui/icons-material/LocalPharmacy";
+import FlightIcon from "@mui/icons-material/Flight";
+import AirlineSeatFlatIcon from "@mui/icons-material/AirlineSeatFlat";
+import AccessibleIcon from "@mui/icons-material/Accessible";
+import PropaneTankIcon from "@mui/icons-material/PropaneTank";
+import MasksIcon from "@mui/icons-material/Masks";
+import BoltIcon from "@mui/icons-material/Bolt";
+import BedIcon from "@mui/icons-material/Bed";
+
+export default function getIcon(icon: string): React.ElementType | null {
+  switch (icon) {
+    case "BedroomBabyIcon":
+      return BedroomBabyIcon;
+    case "BedroomParentIcon":
+      return BedroomParentIcon;
+    case "MonitorHeartIcon":
+      return MonitorHeartIcon;
+    case "VaccinesIcon":
+      return VaccinesIcon;
+    case "LocalHospitalIcon":
+      return LocalHospitalIcon;
+    case "MedicalInformationIcon":
+      return MedicalInformationIcon;
+    case "MedicalServicesIcon":
+      return MedicalServicesIcon;
+    case "ChildCareIcon":
+      return ChildCareIcon;
+    case "ScreenshotMonitorIcon":
+      return ScreenshotMonitorIcon;
+    case "MedicationIcon":
+      return MedicationIcon;
+    case "BloodtypeIcon":
+      return BloodtypeIcon;
+    case "HealingIcon":
+      return HealingIcon;
+    case "LocalPharmacyIcon":
+      return LocalPharmacyIcon;
+    case "FlightIcon":
+      return FlightIcon;
+    case "AirlineSeatFlatIcon":
+      return AirlineSeatFlatIcon;
+    case "AccessibleIcon":
+      return AccessibleIcon;
+    case "PropaneTankIcon":
+      return PropaneTankIcon;
+    case "MasksIcon":
+      return MasksIcon;
+    case "BoltIcon":
+      return BoltIcon;
+    case "BedIcon":
+      return BedIcon;
+    default:
+      return null;
+  }
+}

package/src/stories/Page.stories.js

@@ -50,21 +50,21 @@ HelloWorld.args = {
           heading: "AIR AMBULANCE",
           subHeading:
             "All our aircraft providers are operational around the clock to ensure the patient gets home the fastest way. Our air ambulances are specifically modified to the highest medical standard. To ensure that patients who are in need of repatriation or evacuation can be transported as efficiently as possible. While upholding the highest international standards for medical treatment during the flight. Our aircrafts can carry up to two stretchers if needed and carry an oxygen capacity of ??? liters. Depending on the patient’s needs, travel distance and urgency of transport, the best type of air ambulance will be advised and provided.",
-          icon: "CLOUD_ICON",
+          icon: "AirlineSeatFlatIcon",
         },
         {
           id: 2,
           heading: "BED TO BED",
           subHeading:
             "We offer bed to bed service. Where we will pick up the patient at the hospital of origin and also bring the patient to the receiving hospital with our medical team. This guarantees the best quality handover to the medical team that will take over the care of the patient at home.",
-          icon: "CHECK_ICON",
+          icon: "BedIcon",
         },
         {
           id: 3,
           heading: "COMMERCIAL AIRLINE MEDICAL ESCORT",
           subHeading:
             "Medical transfer by commercial airline is a safe and more cost effective way to travel, if transport by air ambulance is not needed. We can provide medical escorts for necessary treatment and support, to keep the patient safe and comfortable during the flight. Depending on the patient’s diagnosis and condition and also flight options. Transport can be done in first class, business class or with a stretcher in economy class. Our team will help you pick the best way of transport.",
-          icon: "CLOCK_ICON",
+          icon: "FlightIcon",
         },
       ],
     },