beem-component 2.1.8 → 2.1.28

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

@@ -31,16 +31,6 @@ export default {
     iconColor: { control: 'color' },
     textColor: { control: 'color' },
     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' },
   },
 };
 
@@ -51,12 +41,6 @@ const Template = ({
   iconColor,
   textColor,
   iconBackgroundColor,
-  dividerColor,
-  dividerOpacity,
-  dividerType,
-  dividerWidth,
-  labelTextColor,
-  valueTextColor,
 }) => {
   if (variant === 'summary') {
     return (
@@ -94,12 +78,7 @@ 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
-          labelTextColor={labelTextColor}
-          valueTextColor={valueTextColor}
-          label="Time"
-          value="09:00 AM"
-        />
+        <BmInfoPanel.Row label="Time" value="09:00 AM" />
       </BmInfoPanel.Section>
 
       <BmInfoPanel.Section
@@ -107,10 +86,6 @@ const Template = ({
         icon={PersonIcon}
         showDivider={showDivider}
         iconColor={iconColor}
-        dividerColor={dividerColor}
-        dividerType={dividerType}
-        dividerOpacity={dividerOpacity}
-        dividerWitdh={dividerWidth}
       >
         <BmInfoPanel.Row label="Name" value="John Doe" />
         <BmInfoPanel.Row label="Email" value="john@example.com" />
@@ -128,12 +103,6 @@ Default.args = {
   iconColor: '#33B1BA',
   textColor: '#000000',
   iconBackgroundColor: false,
-  dividerColor: '#33b1ba',
-  dividerType: 'dashed',
-  dividerWidth: '1px',
-  dividerOpacity: '0.2',
-  labelTextColor: '#e46a8e',
-  valueTextColor: '#235e92',
 };
 
 export const ExampleSummary = () => {
@@ -173,12 +142,7 @@ 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
-          labelTextColor="#e46a8e"
-          valueTextColor="#235e92"
-          label="Duration"
-          value={appointmentDetails.duration}
-        />
+        <BmInfoPanel.Row label="Duration" value={appointmentDetails.duration} />
         <BmInfoPanel.Row label="Date" value={formData.date.toDateString()} />
         <BmInfoPanel.Row
           label="Time"
@@ -190,10 +154,6 @@ export const ExampleDetails = () => {
         title="Personal Information"
         icon={PersonIcon}
         showDivider
-        dividerColor="#33b1ba"
-        dividerType="dashed"
-        dividerWitdh="1px"
-        dividerOpacity="0.2"
       >
         <BmInfoPanel.Row label="Name" value={formData.name} />
         <BmInfoPanel.Row label="Phone" value={formData.phone} />

package/src/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -1,25 +1,7 @@
 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})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Container = styled.div`
   margin-bottom: 1rem;

package/src/lib/components/SelectionNotice/SelectionNotice.js

@@ -1,25 +1,7 @@
 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})`;
-  }
-};
+import hexToRgba from '../../../util/convertToRGBA';
 
 const Container = styled.div`
   background-color: ${({ color }) => hexToRgba(color || '#33B1BA', 0.05)};

package/src/lib/components/globalStyles.js

@@ -1,5 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
-import { h1, h2, h3, h4, h5, h6, p, input, a, span } from './text';
+import { h1, h2, h3, h4, h5, h6, p, input, a } from './text';
 
 export const GlobalStyle = createGlobalStyle`
 * { font-size: 14px; cursor: pointer}
@@ -12,5 +12,4 @@ export const GlobalStyle = createGlobalStyle`
   p  { ${p} }
   input {${input}}
   a {${a}}
-  span {${span}}
 `;

package/src/lib/components/index.js

@@ -81,8 +81,6 @@ 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';
-import BmAlertBox from './Alert/Alert';
 
 export {
   BmAccordion,
@@ -161,6 +159,4 @@ export {
   BmInfoPanel,
   BmProgressIndicator,
   BmSelector,
-  BmCustomCardTitle,
-  BmAlertBox,
 };

package/src/lib/components/text.js

@@ -1,6 +1,7 @@
-import { Inter } from './typography';
+import { OpenSans } from './typography';
+
 // 32px
-export const h1 = `font-family: ${Inter};
+export const h1 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 2.286rem;
@@ -8,7 +9,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 24px
-export const h2 = `font-family: ${Inter};
+export const h2 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.714rem;
@@ -16,7 +17,7 @@ letter-spacing: -0.02em;
 margin: 0rem;`;
 
 // 18px
-export const h3 = `font-family: ${Inter};
+export const h3 = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.286rem;
@@ -24,7 +25,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 16px
-export const h4 = ` font-family: ${Inter};
+export const h4 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1.143rem;
@@ -32,7 +33,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 14px
-export const h5 = ` font-family: ${Inter};
+export const h5 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: 1rem;
@@ -40,7 +41,7 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 12px
-export const h6 = ` font-family: ${Inter};
+export const h6 = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: 500;
 font-size: .857rem;
@@ -48,28 +49,21 @@ letter-spacing: -0.02rem;
 margin: 0rem;`;
 
 // 14px
-export const p = `font-family: ${Inter};
-font-style: normal;
-font-weight: normal;
-font-size: 1rem;
-letter-spacing: -0.02rem;
-margin: 0rem;`;
-
-export const input = ` font-family: ${Inter};
+export const p = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
-export const a = `font-family: ${Inter};
+export const input = ` font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;
 letter-spacing: -0.02rem;
 margin: 0rem;`;
 
-export const span = `font-family: ${Inter};
+export const a = `font-family: ${OpenSans};
 font-style: normal;
 font-weight: normal;
 font-size: 1rem;

package/src/lib/components/typography.js

@@ -14,4 +14,3 @@ export const Hero = '1rem';
 export const PoppinsMedium = 'PoppinsMedium';
 export const Poppins = 'Poppins';
 export const OpenSans = 'OpenSans';
-export const Inter = 'Inter';

package/dist/components/Alert/Alert.js

@@ -1,83 +0,0 @@
-"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 AlertWrapper = _styledComponents.default.div.withConfig({
-  displayName: "Alert__AlertWrapper"
-})(["border:1px solid ", ";background-color:", ";border-radius:0.5rem;padding:0.75rem;@media (min-width:640px){padding:1rem;}"], _ref => {
-  let {
-    themeColor
-  } = _ref;
-  return hexToRgba(themeColor, 0.2);
-}, _ref2 => {
-  let {
-    themeColor
-  } = _ref2;
-  return hexToRgba(themeColor, 0.05);
-});
-const Content = _styledComponents.default.div.withConfig({
-  displayName: "Alert__Content"
-})(["display:flex;align-items:flex-start;gap:0.75rem;"]);
-const IconContainer = _styledComponents.default.div.withConfig({
-  displayName: "Alert__IconContainer"
-})(["background-color:", ";border-radius:9999px;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-top:0.125rem;@media (min-width:640px){width:2.1rem;height:2.1rem;}svg{width:1rem;height:1rem;color:", ";@media (min-width:640px){width:1.25rem;height:1.25rem;}}"], _ref3 => {
-  let {
-    themeColor
-  } = _ref3;
-  return hexToRgba(themeColor, 0.1);
-}, _ref4 => {
-  let {
-    themeColor
-  } = _ref4;
-  return themeColor;
-});
-const TextContent = _styledComponents.default.div.withConfig({
-  displayName: "Alert__TextContent"
-})(["flex:1;"]);
-const Title = _styledComponents.default.h3.withConfig({
-  displayName: "Alert__Title"
-})(["font-weight:500;color:", ";font-size:0.875rem;margin-bottom:0.25rem;"], _ref5 => {
-  let {
-    themeColor
-  } = _ref5;
-  return themeColor;
-});
-const Description = _styledComponents.default.p.withConfig({
-  displayName: "Alert__Description"
-})(["color:#6b7280;font-size:0.75rem;@media (min-width:640px){font-size:0.875rem;}"]);
-const BmAlertBox = _ref6 => {
-  let {
-    icon: Icon,
-    themeColor = '#EF4444',
-    title,
-    description
-  } = _ref6;
-  return /*#__PURE__*/_react.default.createElement(AlertWrapper, {
-    themeColor: themeColor
-  }, /*#__PURE__*/_react.default.createElement(Content, null, Icon && /*#__PURE__*/_react.default.createElement(IconContainer, {
-    themeColor: themeColor
-  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(TextContent, null, /*#__PURE__*/_react.default.createElement(Title, {
-    themeColor: themeColor
-  }, title), /*#__PURE__*/_react.default.createElement(Description, null, description))));
-};
-var _default = exports.default = BmAlertBox;

package/dist/components/Alert/Alert.stories.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Example = exports.Default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
-var _Person = _interopRequireDefault(require("@mui/icons-material/Person"));
-var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
-var _Alert = _interopRequireDefault(require("./Alert"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const iconOptions = {
-  AccessTimeIcon: _AccessTime.default,
-  PersonIcon: _Person.default,
-  CalendarTodayOutlinedIcon: _CalendarTodayOutlined.default,
-  None: null
-};
-const Template = args => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      maxWidth: 500,
-      margin: '2rem auto'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_Alert.default, args));
-};
-const Default = exports.Default = Template.bind({});
-Default.args = {
-  icon: _AccessTime.default,
-  themeColor: '#EF4444',
-  title: 'Submission Failed',
-  description: 'There was an issue processing your request. Please try again later.'
-};
-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'
-  }
-};
-var _default = exports.default = {
-  title: 'Components/BmAlertBox',
-  component: _Alert.default,
-  argTypes: Default.argTypes
-};
-const Example = () => {
-  return /*#__PURE__*/_react.default.createElement(_Alert.default, {
-    icon: _AccessTime.default,
-    themeColor: "#DC2626",
-    title: "Payment Error",
-    description: "We couldn't process your payment. Please try again later or contact support."
-  });
-};
-exports.Example = Example;

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -1,174 +0,0 @@
-"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:", ";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 {
-    variant
-  } = _ref7;
-  return variant === 'confirmation' ? '3.5rem' : '4rem';
-}, _ref8 => {
-  let {
-    variant
-  } = _ref8;
-  return variant === 'confirmation' ? '3.5rem' : '4rem';
-}, _ref9 => {
-  let {
-    variant
-  } = _ref9;
-  return variant === 'confirmation' ? '0.75rem' : '1rem';
-}, _ref0 => {
-  let {
-    variant
-  } = _ref0;
-  return variant === 'confirmation' ? '4rem' : '5rem';
-}, _ref1 => {
-  let {
-    variant
-  } = _ref1;
-  return variant === 'confirmation' ? '4rem' : '5rem';
-}, _ref10 => {
-  let {
-    variant
-  } = _ref10;
-  return variant === 'confirmation' ? '1rem' : '1.25rem';
-}, _ref11 => {
-  let {
-    variant
-  } = _ref11;
-  return variant === 'confirmation' ? '1.75rem' : '2rem';
-}, _ref12 => {
-  let {
-    variant
-  } = _ref12;
-  return variant === 'confirmation' ? '1.75rem' : '2rem';
-}, _ref13 => {
-  let {
-    themeColor
-  } = _ref13;
-  return themeColor;
-}, _ref14 => {
-  let {
-    variant
-  } = _ref14;
-  return variant === 'confirmation' ? '2rem' : '2.5rem';
-}, _ref15 => {
-  let {
-    variant
-  } = _ref15;
-  return variant === 'confirmation' ? '2rem' : '2.5rem';
-});
-const Title = _styledComponents.default.h2.withConfig({
-  displayName: "CustomCardTitle__Title"
-})(["text-align:center;font-size:1.125rem;color:", ";margin-bottom:", ";@media (min-width:640px){font-size:1.25rem;margin-bottom:", ";}"], _ref16 => {
-  let {
-    themeColor
-  } = _ref16;
-  return themeColor;
-}, _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

@@ -1,85 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Example = 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 => {
-  return /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      maxWidth: 500,
-      margin: '2rem auto'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, args));
-};
-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
-};
-const Example = () => {
-  /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
-    icon: _CalendarTodayOutlined.default,
-    themeColor: "#33B1BA",
-    title: "Book Your Medical Appointment",
-    description: "Schedule a 30-minute consultation with our healthcare specialists",
-    variant: "booking",
-    withStripe: true
-  });
-};
-exports.Example = Example;