beem-component 2.1.29 → 2.1.31

package/dist/components/DepartmentCard/DepartmentCard.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CardWrapper = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__CardWrapper"
+})(["overflow:hidden;border-radius:0.5rem;border:1px solid #e5e7eb;border-top:4px solid ", ";background-color:#ffffff;opacity:", ";transition:opacity 0.3s;"], _ref => {
+  let {
+    borderTopColor
+  } = _ref;
+  return borderTopColor || '#cccccc';
+}, _ref2 => {
+  let {
+    isActive
+  } = _ref2;
+  return isActive ? 1 : 0.5;
+});
+const Header = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__Header"
+})(["padding:1rem 1rem 0.5rem 1rem;"]);
+const TitleRow = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__TitleRow"
+})(["display:flex;justify-content:space-between;align-items:flex-start;"]);
+const CardTitle = _styledComponents.default.h3.withConfig({
+  displayName: "DepartmentCard__CardTitle"
+})(["font-size:1.125rem;margin:0;"]);
+const CardDescription = _styledComponents.default.p.withConfig({
+  displayName: "DepartmentCard__CardDescription"
+})(["font-size:0.875rem;color:#6b7280;margin-top:0.25rem;"]);
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__Content"
+})(["margin-top:1rem;padding:0 1rem 0.5rem 1rem;display:flex;justify-content:space-between;align-items:center;"]);
+const ResourceText = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__ResourceText"
+})(["font-size:0.875rem;color:#6b7280;"]);
+const StatusRow = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__StatusRow"
+})(["display:flex;align-items:center;"]);
+const StatusDot = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__StatusDot"
+})(["flex-shrink:0;width:0.5rem;height:0.5rem;margin-right:0.5rem;border-radius:9999px;background-color:", ";"], _ref3 => {
+  let {
+    isActive
+  } = _ref3;
+  return isActive ? '#22c55e' : '#9ca3af';
+});
+const StatusText = _styledComponents.default.span.withConfig({
+  displayName: "DepartmentCard__StatusText"
+})(["font-size:0.75rem;color:#6b7280;"]);
+const IconButtonsContainer = _styledComponents.default.div.withConfig({
+  displayName: "DepartmentCard__IconButtonsContainer"
+})(["display:flex;gap:0.25rem;"]);
+const IconButton = _styledComponents.default.button.withConfig({
+  displayName: "DepartmentCard__IconButton"
+})(["background:none;border:none;padding:0;height:2rem;width:2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:", ";&:hover{color:", ";}"], _ref4 => {
+  let {
+    destructive
+  } = _ref4;
+  return destructive ? '#ef4444' : 'inherit';
+}, _ref5 => {
+  let {
+    destructive
+  } = _ref5;
+  return destructive ? '#ef4444' : '#374151';
+});
+const BmDepartmentCard = _ref6 => {
+  let {
+    borderTopColor = '#cccccc',
+    isActive = true,
+    name,
+    description,
+    resourcesCount,
+    onEdit,
+    onDelete,
+    EditIcon,
+    DeleteIcon
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(CardWrapper, {
+    borderTopColor: borderTopColor,
+    isActive: isActive
+  }, /*#__PURE__*/_react.default.createElement(Header, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(CardTitle, null, name), /*#__PURE__*/_react.default.createElement(IconButtonsContainer, null, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: onEdit
+  }, EditIcon && /*#__PURE__*/_react.default.createElement(EditIcon, {
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(IconButton, {
+    destructive: true,
+    onClick: onDelete
+  }, DeleteIcon && /*#__PURE__*/_react.default.createElement(DeleteIcon, {
+    fontSize: "small"
+  })))), /*#__PURE__*/_react.default.createElement(CardDescription, null, description)), /*#__PURE__*/_react.default.createElement(Content, null, /*#__PURE__*/_react.default.createElement(ResourceText, null, resourcesCount, " Resources"), /*#__PURE__*/_react.default.createElement(StatusRow, null, /*#__PURE__*/_react.default.createElement(StatusDot, {
+    isActive: isActive
+  }), /*#__PURE__*/_react.default.createElement(StatusText, null, isActive ? 'Active' : 'Inactive'))));
+};
+var _default = exports.default = BmDepartmentCard;

package/dist/components/DepartmentCard/DepartmentCard.stories.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Inactive = exports.Active = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var _default = exports.default = {
+  title: 'Components/BmDepartmentCard',
+  component: _DepartmentCard.default,
+  argTypes: {
+    borderTopColor: {
+      control: 'color'
+    },
+    isActive: {
+      control: 'boolean'
+    },
+    name: {
+      control: 'text'
+    },
+    description: {
+      control: 'text'
+    },
+    resourcesCount: {
+      control: 'number'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DepartmentCard.default, _extends({}, args, {
+  EditIcon: _Edit.default,
+  DeleteIcon: _Delete.default
+}));
+const Active = exports.Active = Template.bind({});
+Active.args = {
+  borderTopColor: '#3b82f6',
+  isActive: true,
+  name: 'Radiology',
+  description: 'Handles imaging and scans for diagnosis',
+  resourcesCount: 5
+};
+const Inactive = exports.Inactive = Template.bind({});
+Inactive.args = {
+  borderTopColor: '#ef4444',
+  isActive: false,
+  name: 'Cardiology',
+  description: 'Provides heart-related care and surgeries',
+  resourcesCount: 3
+};

package/dist/components/HorizontalCard/HorizontalCard.js

@@ -0,0 +1,142 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _AttachMoney = _interopRequireDefault(require("@mui/icons-material/AttachMoney"));
+var _LocationOnOutlined = _interopRequireDefault(require("@mui/icons-material/LocationOnOutlined"));
+var _Link = _interopRequireDefault(require("@mui/icons-material/Link"));
+var _Edit = _interopRequireDefault(require("@mui/icons-material/Edit"));
+var _Delete = _interopRequireDefault(require("@mui/icons-material/Delete"));
+var _Groups2Outlined = _interopRequireDefault(require("@mui/icons-material/Groups2Outlined"));
+var _PeopleAltOutlined = _interopRequireDefault(require("@mui/icons-material/PeopleAltOutlined"));
+var _lodash = require("lodash");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const RowContainer = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__RowContainer"
+})(["position:relative;border:1px solid rgba(0,0,0,0.1);border-radius:8px;padding:16px;transition:all 0.2s;display:flex;justify-content:space-between;align-items:flex-start;cursor:pointer;gap:12px;&:hover{border-color:rgba(0,0,0,0.2);}", " @media (max-width:600px){flex-direction:column;align-items:flex-start;}"], _ref => {
+  let {
+    isActive
+  } = _ref;
+  return !isActive && (0, _styledComponents.css)(["opacity:0.7;"]);
+});
+const ColorBar = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__ColorBar"
+})(["position:absolute;top:0;left:0;width:4px;height:100%;border-top-left-radius:8px;border-bottom-left-radius:8px;background-color:", ";"], props => props.color || '#ccc');
+const InfoContainer = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__InfoContainer"
+})(["flex:1;padding-left:12px;"]);
+const TitleRow = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__TitleRow"
+})(["display:flex;align-items:center;gap:8px;flex-wrap:wrap;"]);
+const Name = _styledComponents.default.h3.withConfig({
+  displayName: "HorizontalCard__Name"
+})(["margin:0;font-weight:500;"]);
+const Badge = _styledComponents.default.span.withConfig({
+  displayName: "HorizontalCard__Badge"
+})(["display:inline-flex;align-items:center;padding:2px 6px;font-size:12px;border-radius:4px;", ""], _ref2 => {
+  let {
+    variant
+  } = _ref2;
+  return variant === 'outline' ? (0, _styledComponents.css)(["border:1px solid #d1d5db;color:#4b5563;background-color:rgba(0,0,0,0.04);"]) : (0, _styledComponents.css)(["background-color:#e6f4ea;color:#166534;border:none;"]);
+});
+const Description = _styledComponents.default.p.withConfig({
+  displayName: "HorizontalCard__Description"
+})(["margin-top:4px;font-size:0.9rem;color:#6b7280;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;word-break:break-word;"]);
+const MetaRow = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__MetaRow"
+})(["display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;"]);
+const MetaItem = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__MetaItem"
+})(["display:flex;align-items:center;font-size:0.875rem;color:#374151;svg{margin-right:4px;width:18px;height:18px;}"]);
+const ActionButtons = _styledComponents.default.div.withConfig({
+  displayName: "HorizontalCard__ActionButtons"
+})(["display:flex;align-items:center;gap:4px;opacity:0;transition:opacity 0.2s;", ":hover &{opacity:1;}"], RowContainer);
+const IconButton = _styledComponents.default.button.withConfig({
+  displayName: "HorizontalCard__IconButton"
+})(["background:transparent;border:none;padding:4px;cursor:pointer;color:", ";transition:color 0.2s;&:hover{color:#111827;}&.danger:hover{color:#dc2626;}@media (max-width:600px){padding:2px;}"], _ref3 => {
+  let {
+    iconColor
+  } = _ref3;
+  return iconColor || '#111827';
+});
+const formatDuration = duration => {
+  if (duration > 60) {
+    const hours = Math.floor(duration / 60);
+    const mins = duration % 60;
+    return "".concat(hours, "h ").concat(mins > 0 ? "".concat(mins, "m") : '');
+  }
+  return "".concat(duration, "m");
+};
+const BmHorizontalCard = _ref4 => {
+  let {
+    onView,
+    onDelete,
+    onCopyLink,
+    name,
+    description,
+    price,
+    color,
+    isActive,
+    location,
+    paymentRequired,
+    selectedResources,
+    address,
+    duration,
+    guest_limit,
+    deleteToolTip,
+    editToolTip,
+    copyToolTip
+  } = _ref4;
+  return /*#__PURE__*/_react.default.createElement(RowContainer, {
+    isActive: isActive
+  }, /*#__PURE__*/_react.default.createElement(ColorBar, {
+    color: color
+  }), /*#__PURE__*/_react.default.createElement(InfoContainer, null, /*#__PURE__*/_react.default.createElement(TitleRow, null, /*#__PURE__*/_react.default.createElement(Name, null, name), !isActive && /*#__PURE__*/_react.default.createElement(Badge, {
+    variant: "outline"
+  }, "Inactive"), paymentRequired && /*#__PURE__*/_react.default.createElement(Badge, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
+    fontSize: "small"
+  }), "Payment Required")), /*#__PURE__*/_react.default.createElement(Description, null, description), /*#__PURE__*/_react.default.createElement(MetaRow, null, duration && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AccessTime.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("span", null, formatDuration(duration))), price && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_AttachMoney.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("span", null, price === 0 ? 'Free' : "".concat(price))), /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_LocationOnOutlined.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("span", null, location, (0, _lodash.lowerCase)(location) === 'physical' && address ? " (".concat(address.split(',')[0], "...)") : '')), guest_limit && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_Groups2Outlined.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("span", null, "Max ", guest_limit, " attendee", guest_limit > 1 ? 's' : '')), selectedResources && selectedResources.length > 0 && /*#__PURE__*/_react.default.createElement(MetaItem, null, /*#__PURE__*/_react.default.createElement(_PeopleAltOutlined.default, {
+    fontSize: "small"
+  }), /*#__PURE__*/_react.default.createElement("span", null, selectedResources.length, " resource", selectedResources.length > 1 ? 's' : '')))), /*#__PURE__*/_react.default.createElement(ActionButtons, null, /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      onCopyLink();
+    },
+    title: copyToolTip || ''
+  }, /*#__PURE__*/_react.default.createElement(_Link.default, {
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(IconButton, {
+    onClick: e => {
+      e.stopPropagation();
+      onView();
+    },
+    title: editToolTip || ''
+  }, /*#__PURE__*/_react.default.createElement(_Edit.default, {
+    fontSize: "small"
+  })), /*#__PURE__*/_react.default.createElement(IconButton, {
+    iconColor: "#dc2626",
+    className: "danger",
+    onClick: e => {
+      e.stopPropagation();
+      onDelete();
+    },
+    title: deleteToolTip || ''
+  }, /*#__PURE__*/_react.default.createElement(_Delete.default, {
+    fontSize: "small"
+  }))));
+};
+var _default = exports.default = BmHorizontalCard;

package/dist/components/HorizontalCard/HorizontalCard.stories.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _addonActions = require("@storybook/addon-actions");
+var _HorizontalCard = _interopRequireDefault(require("./HorizontalCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Components/BmHorizontalCard',
+  component: _HorizontalCard.default,
+  tags: ['autodocs']
+};
+const sampleResources = [{
+  id: 1
+}, {
+  id: 2
+}];
+const Example = () => /*#__PURE__*/_react.default.createElement(_HorizontalCard.default, {
+  onView: (0, _addonActions.action)('View clicked'),
+  onDelete: (0, _addonActions.action)('Delete clicked'),
+  onCopyLink: (0, _addonActions.action)('Copy link clicked'),
+  name: "Strategy Session",
+  description: "Deep dive on your business strategy and next steps.",
+  price: 150,
+  color: "#10b981",
+  isActive: true,
+  location: "physical",
+  paymentRequired: "true",
+  selectedResources: sampleResources,
+  address: "456 Innovation Avenue, Tech City",
+  duration: 60,
+  guest_limit: 10,
+  editToolTip: "edit appointment type",
+  deleteToolTip: "delete appointment type",
+  copyToolTip: "copy appointment type link"
+});
+exports.Example = Example;

package/dist/components/InfoPanel/InfoPanel.js

@@ -30,7 +30,7 @@ const SectionSummaryContainer = _styledComponents.default.div.withConfig({
 })(["display:flex;align-items:center;margin-bottom:1rem;@media (min-width:45.7143rem){margin-bottom:1.25rem;}"]);
 const IconBox = _styledComponents.default.div.withConfig({
   displayName: "InfoPanel__IconBox"
-})(["display:flex;align-items:center;justify-content:center;text-align:center;margin-right:0.5rem;padding:0.5rem;border-radius:714.2143rem;background-color:", ";svg{height:1.2rem;width:1.2rem;color:", ";@media (min-width:45.7143rem){height:1.5rem;width:1.5rem;}}"], _ref => {
+})(["display:flex;align-items:center;justify-content:center;text-align:center;margin-right:0.5rem;padding:0.5rem;border-radius:714.2143rem;background-color:", ";svg{height:1.2rem;width:1.2rem;color:", ";@media (min-width:45.7143rem){height:1.4rem;width:1.4rem;}}"], _ref => {
   let {
     iconBackgroundColor,
     iconColor
@@ -63,7 +63,7 @@ const SummarySubtitle = _styledComponents.default.p.withConfig({
 });
 const SectionContainer = _styledComponents.default.div.withConfig({
   displayName: "InfoPanel__SectionContainer"
-})(["padding:0.75rem 1rem;display:flex;align-items:center;gap:0.5rem;", " @media (max-width:42.8571rem){padding:0.5rem 0.75rem;gap:0.25rem;}"], _ref5 => {
+})(["padding:0.6rem 1rem;display:flex;align-items:center;gap:0.5rem;", " @media (max-width:42.8571rem){padding:0.5rem 0.75rem;gap:0.25rem;}"], _ref5 => {
   let {
     backgroundColor
   } = _ref5;
@@ -80,14 +80,35 @@ const RowContainer = _styledComponents.default.div.withConfig({
 })(["display:flex;justify-content:space-between;font-size:0.875rem;align-items:center;@media (max-width:42.8571rem){font-size:0.8rem;}"]);
 const Label = _styledComponents.default.span.withConfig({
   displayName: "InfoPanel__Label"
-})(["color:rgba(0,0,0,0.6);@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+})(["color:", ";@media (max-width:42.8571rem){font-size:0.75rem;}"], _ref6 => {
+  let {
+    labelTextColor
+  } = _ref6;
+  return hexToRgba(labelTextColor || '#000000', 0.6);
+});
 const Value = _styledComponents.default.span.withConfig({
   displayName: "InfoPanel__Value"
-})(["font-weight:500;@media (max-width:42.8571rem){font-size:0.75rem;}"]);
+})(["font-weight:500;color:", ";@media (max-width:42.8571rem){font-size:0.75rem;}"], _ref7 => {
+  let {
+    valueTextColor
+  } = _ref7;
+  return hexToRgba(valueTextColor || '#000000', 1);
+});
 const Divider = _styledComponents.default.hr.withConfig({
   displayName: "InfoPanel__Divider"
-})(["border:none;border-top:0.0714rem dashed rgba(51,177,186,0.2);margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"]);
-const SectionSummary = _ref6 => {
+})(["border:none;border-top:", ";margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"], _ref8 => {
+  let {
+    showDivider,
+    dividerColor = '#33b1ba',
+    dividerType = 'dashed',
+    dividerWitdh = '1px',
+    dividerOpacity = '0.2'
+  } = _ref8;
+  if (showDivider) {
+    return "".concat(dividerWitdh, " ").concat(dividerType, " ").concat(hexToRgba(dividerColor, dividerOpacity));
+  }
+});
+const SectionSummary = _ref9 => {
   let {
     icon: Icon,
     title,
@@ -95,7 +116,7 @@ const SectionSummary = _ref6 => {
     textColor,
     subtitle,
     iconBackgroundColor
-  } = _ref6;
+  } = _ref9;
   return /*#__PURE__*/_react.default.createElement(SectionSummaryContainer, null, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
@@ -105,13 +126,13 @@ const SectionSummary = _ref6 => {
     textColor: textColor
   }, subtitle)));
 };
-const BmInfoPanel = _ref7 => {
+const BmInfoPanel = _ref0 => {
   let {
     children
-  } = _ref7;
+  } = _ref0;
   return /*#__PURE__*/_react.default.createElement(Panel, null, children);
 };
-const Section = _ref8 => {
+const Section = _ref1 => {
   let {
     title,
     icon: Icon,
@@ -119,21 +140,37 @@ const Section = _ref8 => {
     showDivider,
     backgroundColor,
     iconColor,
-    iconBackgroundColor
-  } = _ref8;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(SectionContainer, {
+    iconBackgroundColor,
+    dividerColor,
+    dividerWitdh,
+    dividerType,
+    dividerOpacity
+  } = _ref1;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, {
+    dividerColor: dividerColor,
+    showDivider: showDivider,
+    dividerWitdh: dividerWitdh,
+    dividerType: dividerType,
+    dividerOpacity: dividerOpacity
+  }), /*#__PURE__*/_react.default.createElement(SectionContainer, {
     backgroundColor: backgroundColor
   }, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
   }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(SectionTitle, null, title)), /*#__PURE__*/_react.default.createElement(SectionBody, null, children));
 };
-const Row = _ref9 => {
+const Row = _ref10 => {
   let {
     label,
-    value
-  } = _ref9;
-  return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, null, label, ":"), /*#__PURE__*/_react.default.createElement(Value, null, value));
+    value,
+    labelTextColor,
+    valueTextColor
+  } = _ref10;
+  return /*#__PURE__*/_react.default.createElement(RowContainer, null, /*#__PURE__*/_react.default.createElement(Label, {
+    labelTextColor: labelTextColor
+  }, label, ":"), /*#__PURE__*/_react.default.createElement(Value, {
+    valueTextColor: valueTextColor
+  }, value));
 };
 BmInfoPanel.Section = Section;
 BmInfoPanel.Row = Row;

package/dist/components/InfoPanel/InfoPanel.stories.js

@@ -48,6 +48,34 @@ var _default = exports.default = {
     },
     iconBackgroundColor: {
       control: 'boolean'
+    },
+    dividerColor: {
+      control: 'color'
+    },
+    dividerWidth: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: '3px'
+    },
+    dividerOpacity: {
+      control: {
+        type: 'text'
+      },
+      defaultValue: '0.2'
+    },
+    dividerType: {
+      control: {
+        type: 'select'
+      },
+      options: ['dashed', 'solid'],
+      defaultValue: 'dashed'
+    },
+    labelTextColor: {
+      control: 'color'
+    },
+    valueTextColor: {
+      control: 'color'
     }
   }
 };
@@ -58,7 +86,13 @@ const Template = _ref => {
     backgroundColor,
     iconColor,
     textColor,
-    iconBackgroundColor
+    iconBackgroundColor,
+    dividerColor,
+    dividerOpacity,
+    dividerType,
+    dividerWidth,
+    labelTextColor,
+    valueTextColor
   } = _ref;
   if (variant === 'summary') {
     return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, {
@@ -100,13 +134,19 @@ const Template = _ref => {
     label: "Date",
     value: "Monday, June 24, 2025"
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
+    labelTextColor: labelTextColor,
+    valueTextColor: valueTextColor,
     label: "Time",
     value: "09:00 AM"
   })), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
     title: "Personal Information",
     icon: _Person.default,
     showDivider: showDivider,
-    iconColor: iconColor
+    iconColor: iconColor,
+    dividerColor: dividerColor,
+    dividerType: dividerType,
+    dividerOpacity: dividerOpacity,
+    dividerWitdh: dividerWidth
   }, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
     label: "Name",
     value: "John Doe"
@@ -125,7 +165,13 @@ Default.args = {
   backgroundColor: '#33B1BA',
   iconColor: '#33B1BA',
   textColor: '#000000',
-  iconBackgroundColor: false
+  iconBackgroundColor: false,
+  dividerColor: '#33b1ba',
+  dividerType: 'dashed',
+  dividerWidth: '1px',
+  dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92'
 };
 const ExampleSummary = () => {
   return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, null, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
@@ -162,6 +208,8 @@ const ExampleDetails = () => {
     label: "Resource",
     value: formData.resourceName
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
+    labelTextColor: "#e46a8e",
+    valueTextColor: "#235e92",
     label: "Duration",
     value: appointmentDetails.duration
   }), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
@@ -173,7 +221,11 @@ const ExampleDetails = () => {
   })), /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
     title: "Personal Information",
     icon: _Person.default,
-    showDivider: true
+    showDivider: true,
+    dividerColor: "#33b1ba",
+    dividerType: "dashed",
+    dividerWitdh: "1px",
+    dividerOpacity: "0.2"
   }, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Row, {
     label: "Name",
     value: formData.name

package/dist/components/Modals/modal.js

@@ -10,7 +10,7 @@ var _icons = require("@material-ui/icons");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("../colors");
 var _iconStyles = require("../iconStyles");
-const _excluded = ["children", "show", "size", "onHide", "centered"],
+const _excluded = ["children", "show", "size", "zIndex", "onHide", "centered"],
   _excluded2 = ["children", "size", "onHide", "subHeading", "closeButton", "show", "icon", "trailingIcon"];
 /* eslint-disable no-undef */
 /* eslint-disable react/display-name */
@@ -25,22 +25,36 @@ const {
 } = /*#__PURE__*/_react.default.createContext();
 const Overlay = exports.Overlay = _styledComponents.default.div.withConfig({
   displayName: "modal__Overlay"
-})(["position:fixed;top:0;left:0;z-index:9999;width:100vw;height:100vh;background-color:", ";"], _colors.BmBgGrey45);
+})(["position:fixed;top:0;left:0;z-index:", ";width:100vw;height:100vh;background-color:", ";"], _ref => {
+  let {
+    zIndex
+  } = _ref;
+  return zIndex || 20;
+}, _colors.BmBgGrey45);
 const ModalContent = exports.ModalContent = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalContent"
-})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:500px;}"], _colors.BmPrimaryWhite);
+})(["display:flex;flex-direction:column;border-radius:0.8571rem;padding:1rem;margin:2rem auto;background:", ";width:auto;max-width:100%;> *:not(:last-child){margin-bottom:0.5rem;}@media (min-width:576px){width:", ";}"], _colors.BmPrimaryWhite, _ref2 => {
+  let {
+    size
+  } = _ref2;
+  if (size) {
+    return size;
+  }
+  return '500px';
+});
 const ModalWrapper = exports.ModalWrapper = _styledComponents.default.div.withConfig({
   displayName: "modal__ModalWrapper"
 })(["position:fixed;top:0;left:0;z-index:9999;display:block;width:100%;height:100%;overflow:hidden;outline:0;margin:auto;overflow-x:hidden;overflow-y:auto;"]);
-const BmModal = _ref => {
+const BmModal = _ref3 => {
   let {
       children,
       show,
       size,
+      zIndex,
       onHide,
       centered
-    } = _ref,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    } = _ref3,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   const [toggle, setToggle] = (0, _react.useState)(show);
   (0, _react.useEffect)(() => {
     setToggle(show);
@@ -54,7 +68,9 @@ const BmModal = _ref => {
     document.addEventListener('keydown', keyPress);
     return () => document.removeEventListener('keydown', keyPress);
   }, [keyPress]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, null), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, toggle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Overlay, {
+    zIndex: zIndex
+  }), /*#__PURE__*/_react.default.createElement(ModalWrapper, {
     showModal: show,
     centered: centered,
     onHide: onHide
@@ -79,7 +95,7 @@ const ModalHeaderContent = _styledComponents.default.div.withConfig({
 const IconContainer = _styledComponents.default.div.withConfig({
   displayName: "modal__IconContainer"
 })(["display:flex;padding:0.5714rem;justify-content:center;align-items:center;border-radius:0.7143rem;border:0.0714rem solid var(--Gray-200,#eaecf0);background:var(--Base-White,#fff);box-shadow:0rem 0.0714rem 0.1429rem 0rem rgba(16,24,40,0.05);"]);
-BmModal.Header = _ref2 => {
+BmModal.Header = _ref4 => {
   let {
       children,
       size,
@@ -89,8 +105,8 @@ BmModal.Header = _ref2 => {
       show,
       icon,
       trailingIcon
-    } = _ref2,
-    rest = _objectWithoutProperties(_ref2, _excluded2);
+    } = _ref4,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
   return /*#__PURE__*/_react.default.createElement(Consumer, null, value => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ModalHeader, rest, trailingIcon && /*#__PURE__*/_react.default.createElement(IconContainer, null, trailingIcon), /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: '100%'