beem-component 2.1.3 → 2.1.5

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -0,0 +1,174 @@
+"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 hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const BackgroundStripe = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__BackgroundStripe"
+})(["background-color:", ";padding-top:", ";padding-bottom:", ";padding-left:1rem;padding-right:1rem;@media (min-width:640px){padding-top:", ";padding-bottom:", ";padding-left:1.5rem;padding-right:1.5rem;}"], _ref => {
+  let {
+    themeColor
+  } = _ref;
+  return hexToRgba(themeColor, 0.1);
+}, _ref2 => {
+  let {
+    variant
+  } = _ref2;
+  return variant === 'confirmation' ? '1rem' : '1.5rem';
+}, _ref3 => {
+  let {
+    variant
+  } = _ref3;
+  return variant === 'confirmation' ? '1rem' : '2rem';
+}, _ref4 => {
+  let {
+    variant
+  } = _ref4;
+  return variant === 'confirmation' ? '1.5rem' : '2rem';
+}, _ref5 => {
+  let {
+    variant
+  } = _ref5;
+  return variant === 'confirmation' ? '1.5rem' : '2.5rem';
+});
+const CardContainer = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__CardContainer"
+})(["background-color:", ";padding:1rem;border-radius:0.75rem;@media (min-width:640px){padding:1.5rem;}"], hexToRgba('#ffffff', 0.7));
+const IconWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__IconWrapper"
+})(["background-color:", ";border:2px solid ", ";height:", ";width:", ";border-radius:9999px;display:flex;align-items:center;justify-content:center;margin:0 auto ", ";@media (min-width:640px){height:", ";width:", ";margin-bottom:", ";}svg{height:", ";width:", ";color:", ";@media (min-width:640px){height:", ";width:", ";}}"], _ref6 => {
+  let {
+    themeColor
+  } = _ref6;
+  return hexToRgba(themeColor, 0.1);
+}, _ref7 => {
+  let {
+    themeColor
+  } = _ref7;
+  return themeColor;
+}, _ref8 => {
+  let {
+    variant
+  } = _ref8;
+  return variant === 'confirmation' ? '3.5rem' : '4rem';
+}, _ref9 => {
+  let {
+    variant
+  } = _ref9;
+  return variant === 'confirmation' ? '3.5rem' : '4rem';
+}, _ref0 => {
+  let {
+    variant
+  } = _ref0;
+  return variant === 'confirmation' ? '0.75rem' : '1rem';
+}, _ref1 => {
+  let {
+    variant
+  } = _ref1;
+  return variant === 'confirmation' ? '4rem' : '5rem';
+}, _ref10 => {
+  let {
+    variant
+  } = _ref10;
+  return variant === 'confirmation' ? '4rem' : '5rem';
+}, _ref11 => {
+  let {
+    variant
+  } = _ref11;
+  return variant === 'confirmation' ? '1rem' : '1.25rem';
+}, _ref12 => {
+  let {
+    variant
+  } = _ref12;
+  return variant === 'confirmation' ? '1.75rem' : '2rem';
+}, _ref13 => {
+  let {
+    variant
+  } = _ref13;
+  return variant === 'confirmation' ? '1.75rem' : '2rem';
+}, _ref14 => {
+  let {
+    themeColor
+  } = _ref14;
+  return themeColor;
+}, _ref15 => {
+  let {
+    variant
+  } = _ref15;
+  return variant === 'confirmation' ? '2rem' : '2.5rem';
+}, _ref16 => {
+  let {
+    variant
+  } = _ref16;
+  return variant === 'confirmation' ? '2rem' : '2.5rem';
+});
+const Title = _styledComponents.default.h2.withConfig({
+  displayName: "CustomCardTitle__Title"
+})(["text-align:center;font-size:1.125rem;margin-bottom:", ";@media (min-width:640px){font-size:1.25rem;margin-bottom:", ";}"], _ref17 => {
+  let {
+    variant
+  } = _ref17;
+  return variant === 'confirmation' ? '0.25rem' : '0.5rem';
+}, _ref18 => {
+  let {
+    variant
+  } = _ref18;
+  return variant === 'confirmation' ? '0.5rem' : '0.75rem';
+});
+const Description = _styledComponents.default.p.withConfig({
+  displayName: "CustomCardTitle__Description"
+})(["text-align:center;font-size:", ";color:#6b7280;@media (min-width:640px){font-size:", ";}"], _ref19 => {
+  let {
+    variant
+  } = _ref19;
+  return variant === 'confirmation' ? '0.75rem' : '0.875rem';
+}, _ref20 => {
+  let {
+    variant
+  } = _ref20;
+  return variant === 'confirmation' ? '0.875rem' : '1rem';
+});
+const BmCustomCardTitle = _ref21 => {
+  let {
+    icon: Icon,
+    themeColor = '#33B1BA',
+    title,
+    description,
+    variant = 'booking',
+    withStripe = false
+  } = _ref21;
+  const content = /*#__PURE__*/_react.default.createElement(CardContainer, {
+    variant: variant
+  }, /*#__PURE__*/_react.default.createElement(IconWrapper, {
+    themeColor: themeColor,
+    variant: variant
+  }, Icon && /*#__PURE__*/_react.default.createElement(Icon, null)), title && /*#__PURE__*/_react.default.createElement(Title, {
+    variant: variant
+  }, title), description && /*#__PURE__*/_react.default.createElement(Description, {
+    variant: variant
+  }, description));
+  return withStripe ? /*#__PURE__*/_react.default.createElement(BackgroundStripe, {
+    themeColor: themeColor,
+    variant: variant
+  }, content) : content;
+};
+var _default = exports.default = BmCustomCardTitle;

package/dist/components/BmCustomCardTitle/CustomCardTitle.stories.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _Favorite = _interopRequireDefault(require("@mui/icons-material/Favorite"));
+var _CustomCardTitle = _interopRequireDefault(require("./CustomCardTitle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// MUI icons
+
+// Icon options mapped by name
+const iconOptions = {
+  Calendar: _CalendarTodayOutlined.default,
+  Check: _Check.default,
+  Clock: _AccessTime.default,
+  Heart: _Favorite.default
+};
+const Template = args => {
+  var _Object$entries$find;
+  const iconName = (_Object$entries$find = Object.entries(iconOptions).find(_ref => {
+    let [, comp] = _ref;
+    return comp === args.icon;
+  })) === null || _Object$entries$find === void 0 ? void 0 : _Object$entries$find[0];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 500,
+      margin: '2rem auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, args), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '2rem',
+      fontSize: '0.875rem'
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Example usage:"), /*#__PURE__*/_react.default.createElement("pre", {
+    style: {
+      background: '#f5f5f5',
+      padding: '1rem',
+      borderRadius: 8,
+      overflowX: 'auto'
+    }
+  }, "<BmCustomCardTitle\n  icon={".concat(iconName, "}\n  themeColor=\"").concat(args.themeColor, "\"\n  title=\"").concat(args.title, "\"\n  description=\"").concat(args.description, "\"\n  variant=\"").concat(args.variant, "\"\n  withStripe={").concat(args.withStripe, "}\n/>"))));
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  icon: _CalendarTodayOutlined.default,
+  themeColor: '#33B1BA',
+  title: 'Book Your Medical Appointment',
+  description: 'Schedule a 30-minute consultation with our healthcare specialists',
+  variant: 'booking',
+  withStripe: true
+};
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions)
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions
+  },
+  themeColor: {
+    control: 'color'
+  },
+  title: {
+    control: 'text'
+  },
+  description: {
+    control: 'text'
+  },
+  variant: {
+    control: {
+      type: 'radio'
+    },
+    options: ['booking', 'confirmation']
+  },
+  withStripe: {
+    control: {
+      type: 'boolean'
+    }
+  }
+};
+var _default = exports.default = {
+  title: 'Components/BmCustomCardTitle',
+  component: _CustomCardTitle.default,
+  argTypes: Default.argTypes
+};

package/dist/components/InfoPanel/InfoPanel.js

@@ -80,25 +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:", ";margin:1rem auto;max-width:97%;@media (max-width:42.8571rem){margin:0.75rem auto;max-width:97%;}"], _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'
-  } = _ref6;
+  } = _ref8;
   if (showDivider) {
     return "".concat(dividerWitdh, " ").concat(dividerType, " ").concat(hexToRgba(dividerColor, dividerOpacity));
   }
 });
-const SectionSummary = _ref7 => {
+const SectionSummary = _ref9 => {
   let {
     icon: Icon,
     title,
@@ -106,7 +116,7 @@ const SectionSummary = _ref7 => {
     textColor,
     subtitle,
     iconBackgroundColor
-  } = _ref7;
+  } = _ref9;
   return /*#__PURE__*/_react.default.createElement(SectionSummaryContainer, null, Icon && /*#__PURE__*/_react.default.createElement(IconBox, {
     iconColor: iconColor,
     iconBackgroundColor: iconBackgroundColor
@@ -116,13 +126,13 @@ const SectionSummary = _ref7 => {
     textColor: textColor
   }, subtitle)));
 };
-const BmInfoPanel = _ref8 => {
+const BmInfoPanel = _ref0 => {
   let {
     children
-  } = _ref8;
+  } = _ref0;
   return /*#__PURE__*/_react.default.createElement(Panel, null, children);
 };
-const Section = _ref9 => {
+const Section = _ref1 => {
   let {
     title,
     icon: Icon,
@@ -135,7 +145,7 @@ const Section = _ref9 => {
     dividerWitdh,
     dividerType,
     dividerOpacity
-  } = _ref9;
+  } = _ref1;
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showDivider && /*#__PURE__*/_react.default.createElement(Divider, {
     dividerColor: dividerColor,
     showDivider: showDivider,
@@ -149,12 +159,18 @@ const Section = _ref9 => {
     iconBackgroundColor: iconBackgroundColor
   }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(SectionTitle, null, title)), /*#__PURE__*/_react.default.createElement(SectionBody, null, children));
 };
-const Row = _ref0 => {
+const Row = _ref10 => {
   let {
     label,
-    value
-  } = _ref0;
-  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

@@ -70,6 +70,12 @@ var _default = exports.default = {
       },
       options: ['dashed', 'solid'],
       defaultValue: 'dashed'
+    },
+    labelTextColor: {
+      control: 'color'
+    },
+    valueTextColor: {
+      control: 'color'
     }
   }
 };
@@ -84,7 +90,9 @@ const Template = _ref => {
     dividerColor,
     dividerOpacity,
     dividerType,
-    dividerWidth
+    dividerWidth,
+    labelTextColor,
+    valueTextColor
   } = _ref;
   if (variant === 'summary') {
     return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, {
@@ -126,6 +134,8 @@ 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, {
@@ -159,7 +169,9 @@ Default.args = {
   dividerColor: '#33b1ba',
   dividerType: 'dashed',
   dividerWidth: '1px',
-  dividerOpacity: '0.2'
+  dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92'
 };
 const ExampleSummary = () => {
   return /*#__PURE__*/_react.default.createElement(_InfoPanel.default, null, /*#__PURE__*/_react.default.createElement(_InfoPanel.default.Section, {
@@ -196,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, {

package/dist/components/index.js

@@ -166,6 +166,12 @@ Object.defineProperty(exports, "BmCounter", {
     return _messageCounter.default;
   }
 });
+Object.defineProperty(exports, "BmCustomCardTitle", {
+  enumerable: true,
+  get: function () {
+    return _CustomCardTitle.default;
+  }
+});
 Object.defineProperty(exports, "BmEmojiIcon", {
   enumerable: true,
   get: function () {
@@ -465,5 +471,6 @@ var _LabelWithIcon = _interopRequireDefault(require("./LabelWithIcon/LabelWithIc
 var _Card = require("./Card_v2/Card");
 var _InfoPanel = _interopRequireDefault(require("./InfoPanel/InfoPanel"));
 var _BmSelector = _interopRequireDefault(require("./BmSelector/BmSelector"));
+var _CustomCardTitle = _interopRequireDefault(require("./BmCustomCardTitle/CustomCardTitle"));
 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 }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -7,6 +7,8 @@ import React, { useState } from 'react';
 // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import PersonIcon from '@mui/icons-material/Person';
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import CheckIcon from '@mui/icons-material/Check';
 // import { Tooltip } from '@mui/material';
 import PeopleIcon from '@mui/icons-material/People';
 // import BusinessIcon from '@mui/icons-material/Business';
@@ -33,6 +35,7 @@ import {
   BmButton,
   BmSelectionNotice,
   BmSelector,
+  BmCustomCardTitle,
 } from './lib/components';
 // import ProgressIndicator from './lib/components/newProgress';
 
@@ -1006,7 +1009,28 @@ const Chat = () => {
   return (
     <>
       <GlobalStyle />
-
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div>
+          <BmCustomCardTitle
+            icon={CalendarTodayOutlinedIcon}
+            themeColor="#33B1BA"
+            title="Book Your Medical Appointment"
+            description="Schedule a 30-minute consultation with our healthcare specialists"
+            variant="booking"
+            withStripe
+          />
+        </div>
+        <div>
+          <BmCustomCardTitle
+            icon={CheckIcon}
+            themeColor="#33B1BA"
+            title="Appointment Confirmed!"
+            description="Your booking has been successfully scheduled"
+            variant="confirmation"
+            withStripe
+          />
+        </div>
+      </div>
       <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
         <div style={{ padding: '2rem' }}>
           <h1>Progress Indicator Demo</h1>

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.js

@@ -0,0 +1,142 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const hexToRgba = (hex, opacity = 0.6) => {
+  try {
+    const normalizedHex = hex?.replace('#', '');
+    if (
+      !normalizedHex ||
+      normalizedHex.length !== 6 ||
+      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
+    ) {
+      throw new Error('Invalid hex');
+    }
+
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  } catch (e) {
+    return `rgba(0, 0, 0, ${opacity})`;
+  }
+};
+
+const BackgroundStripe = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  padding-top: ${({ variant }) =>
+    variant === 'confirmation' ? '1rem' : '1.5rem'};
+  padding-bottom: ${({ variant }) =>
+    variant === 'confirmation' ? '1rem' : '2rem'};
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @media (min-width: 640px) {
+    padding-top: ${({ variant }) =>
+      variant === 'confirmation' ? '1.5rem' : '2rem'};
+    padding-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '1.5rem' : '2.5rem'};
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+`;
+
+const CardContainer = styled.div`
+  background-color: ${hexToRgba('#ffffff', 0.7)};
+  padding: 1rem;
+  border-radius: 0.75rem;
+
+  @media (min-width: 640px) {
+    padding: 1.5rem;
+  }
+`;
+
+const IconWrapper = styled.div`
+  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
+  border: 2px solid ${({ themeColor }) => themeColor};
+  height: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
+  width: ${({ variant }) => (variant === 'confirmation' ? '3.5rem' : '4rem')};
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto
+    ${({ variant }) => (variant === 'confirmation' ? '0.75rem' : '1rem')};
+
+  @media (min-width: 640px) {
+    height: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
+    width: ${({ variant }) => (variant === 'confirmation' ? '4rem' : '5rem')};
+    margin-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '1rem' : '1.25rem'};
+  }
+
+  svg {
+    height: ${({ variant }) =>
+      variant === 'confirmation' ? '1.75rem' : '2rem'};
+    width: ${({ variant }) =>
+      variant === 'confirmation' ? '1.75rem' : '2rem'};
+    color: ${({ themeColor }) => themeColor};
+
+    @media (min-width: 640px) {
+      height: ${({ variant }) =>
+        variant === 'confirmation' ? '2rem' : '2.5rem'};
+      width: ${({ variant }) =>
+        variant === 'confirmation' ? '2rem' : '2.5rem'};
+    }
+  }
+`;
+
+const Title = styled.h2`
+  text-align: center;
+  font-size: 1.125rem;
+  margin-bottom: ${({ variant }) =>
+    variant === 'confirmation' ? '0.25rem' : '0.5rem'};
+
+  @media (min-width: 640px) {
+    font-size: 1.25rem;
+    margin-bottom: ${({ variant }) =>
+      variant === 'confirmation' ? '0.5rem' : '0.75rem'};
+  }
+`;
+
+const Description = styled.p`
+  text-align: center;
+  font-size: ${({ variant }) =>
+    variant === 'confirmation' ? '0.75rem' : '0.875rem'};
+  color: #6b7280;
+
+  @media (min-width: 640px) {
+    font-size: ${({ variant }) =>
+      variant === 'confirmation' ? '0.875rem' : '1rem'};
+  }
+`;
+
+const BmCustomCardTitle = ({
+  icon: Icon,
+  themeColor = '#33B1BA',
+  title,
+  description,
+  variant = 'booking',
+  withStripe = false,
+}) => {
+  const content = (
+    <CardContainer variant={variant}>
+      <IconWrapper themeColor={themeColor} variant={variant}>
+        {Icon && <Icon />}
+      </IconWrapper>
+      {title && <Title variant={variant}>{title}</Title>}
+      {description && (
+        <Description variant={variant}>{description}</Description>
+      )}
+    </CardContainer>
+  );
+
+  return withStripe ? (
+    <BackgroundStripe themeColor={themeColor} variant={variant}>
+      {content}
+    </BackgroundStripe>
+  ) : (
+    content
+  );
+};
+
+export default BmCustomCardTitle;

package/src/lib/components/BmCustomCardTitle/CustomCardTitle.stories.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+// MUI icons
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import CheckIcon from '@mui/icons-material/Check';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import BmCustomCardTitle from './CustomCardTitle';
+
+// Icon options mapped by name
+const iconOptions = {
+  Calendar: CalendarTodayOutlinedIcon,
+  Check: CheckIcon,
+  Clock: AccessTimeIcon,
+  Heart: FavoriteIcon,
+};
+
+const Template = (args) => {
+  const iconName = Object.entries(iconOptions).find(
+    ([, comp]) => comp === args.icon
+  )?.[0];
+
+  return (
+    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
+      <BmCustomCardTitle {...args} />
+      <div style={{ marginTop: '2rem', fontSize: '0.875rem' }}>
+        <strong>Example usage:</strong>
+        <pre
+          style={{
+            background: '#f5f5f5',
+            padding: '1rem',
+            borderRadius: 8,
+            overflowX: 'auto',
+          }}
+        >
+          {`<BmCustomCardTitle
+  icon={${iconName}}
+  themeColor="${args.themeColor}"
+  title="${args.title}"
+  description="${args.description}"
+  variant="${args.variant}"
+  withStripe={${args.withStripe}}
+/>`}
+        </pre>
+      </div>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: CalendarTodayOutlinedIcon,
+  themeColor: '#33B1BA',
+  title: 'Book Your Medical Appointment',
+  description:
+    'Schedule a 30-minute consultation with our healthcare specialists',
+  variant: 'booking',
+  withStripe: true,
+};
+
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions),
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions,
+  },
+  themeColor: {
+    control: 'color',
+  },
+  title: {
+    control: 'text',
+  },
+  description: {
+    control: 'text',
+  },
+  variant: {
+    control: {
+      type: 'radio',
+    },
+    options: ['booking', 'confirmation'],
+  },
+  withStripe: {
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export default {
+  title: 'Components/BmCustomCardTitle',
+  component: BmCustomCardTitle,
+  argTypes: Default.argTypes,
+};

package/src/lib/components/InfoPanel/InfoPanel.js

@@ -134,8 +134,7 @@ const RowContainer = styled.div`
 `;
 
 const Label = styled.span`
-  color: rgba(0, 0, 0, 0.6);
-
+  color: ${({ labelTextColor }) => hexToRgba(labelTextColor || '#000000', 0.6)};
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -143,7 +142,7 @@ const Label = styled.span`
 
 const Value = styled.span`
   font-weight: 500;
-
+  color: ${({ valueTextColor }) => hexToRgba(valueTextColor || '#000000', 1)};
   @media (max-width: 42.8571rem) {
     font-size: 0.75rem;
   }
@@ -232,10 +231,10 @@ const Section = ({
   </>
 );
 
-const Row = ({ label, value }) => (
+const Row = ({ label, value, labelTextColor, valueTextColor }) => (
   <RowContainer>
-    <Label>{label}:</Label>
-    <Value>{value}</Value>
+    <Label labelTextColor={labelTextColor}>{label}:</Label>
+    <Value valueTextColor={valueTextColor}>{value}</Value>
   </RowContainer>
 );
 

package/src/lib/components/InfoPanel/InfoPanel.stories.jsx

@@ -39,6 +39,8 @@ export default {
       options: ['dashed', 'solid'],
       defaultValue: 'dashed',
     },
+    labelTextColor: { control: 'color' },
+    valueTextColor: { control: 'color' },
   },
 };
 
@@ -53,6 +55,8 @@ const Template = ({
   dividerOpacity,
   dividerType,
   dividerWidth,
+  labelTextColor,
+  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -90,7 +94,12 @@ const Template = ({
         <BmInfoPanel.Row label="Resource" value="Dr. Smith" />
         <BmInfoPanel.Row label="Duration" value="30 minutes" />
         <BmInfoPanel.Row label="Date" value="Monday, June 24, 2025" />
-        <BmInfoPanel.Row label="Time" value="09:00 AM" />
+        <BmInfoPanel.Row
+          labelTextColor={labelTextColor}
+          valueTextColor={valueTextColor}
+          label="Time"
+          value="09:00 AM"
+        />
       </BmInfoPanel.Section>
 
       <BmInfoPanel.Section
@@ -123,6 +132,8 @@ Default.args = {
   dividerType: 'dashed',
   dividerWidth: '1px',
   dividerOpacity: '0.2',
+  labelTextColor: '#e46a8e',
+  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -162,7 +173,12 @@ export const ExampleDetails = () => {
         <BmInfoPanel.Row label="Type" value={appointmentDetails.title} />
         <BmInfoPanel.Row label="Department" value={formData.departmentName} />
         <BmInfoPanel.Row label="Resource" value={formData.resourceName} />
-        <BmInfoPanel.Row label="Duration" value={appointmentDetails.duration} />
+        <BmInfoPanel.Row
+          labelTextColor="#e46a8e"
+          valueTextColor="#235e92"
+          label="Duration"
+          value={appointmentDetails.duration}
+        />
         <BmInfoPanel.Row label="Date" value={formData.date.toDateString()} />
         <BmInfoPanel.Row
           label="Time"

package/src/lib/components/index.js

@@ -81,6 +81,7 @@ import BmLabelWithIcon from './LabelWithIcon/LabelWithIcon';
 import { BmCardv2 } from './Card_v2/Card';
 import BmInfoPanel from './InfoPanel/InfoPanel';
 import BmSelector from './BmSelector/BmSelector';
+import BmCustomCardTitle from './BmCustomCardTitle/CustomCardTitle';
 
 export {
   BmAccordion,
@@ -159,4 +160,5 @@ export {
   BmInfoPanel,
   BmProgressIndicator,
   BmSelector,
+  BmCustomCardTitle,
 };