beem-component 2.1.6 → 2.1.8

package/dist/components/Alert/Alert.js

@@ -65,7 +65,7 @@ const Title = _styledComponents.default.h3.withConfig({
 const Description = _styledComponents.default.p.withConfig({
   displayName: "Alert__Description"
 })(["color:#6b7280;font-size:0.75rem;@media (min-width:640px){font-size:0.875rem;}"]);
-const AlertBox = _ref6 => {
+const BmAlertBox = _ref6 => {
   let {
     icon: Icon,
     themeColor = '#EF4444',
@@ -80,4 +80,4 @@ const AlertBox = _ref6 => {
     themeColor: themeColor
   }, title), /*#__PURE__*/_react.default.createElement(Description, null, description))));
 };
-var _default = exports.default = AlertBox;
+var _default = exports.default = BmAlertBox;

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

@@ -51,7 +51,7 @@ Default.argTypes = {
   }
 };
 var _default = exports.default = {
-  title: 'Components/AlertBox',
+  title: 'Components/BmAlertBox',
   component: _Alert.default,
   argTypes: Default.argTypes
 };

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -55,16 +55,16 @@ const CardContainer = _styledComponents.default.div.withConfig({
 })(["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 => {
+})(["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 {
-    themeColor
+    variant
   } = _ref7;
-  return themeColor;
+  return variant === 'confirmation' ? '3.5rem' : '4rem';
 }, _ref8 => {
   let {
     variant
@@ -74,12 +74,12 @@ const IconWrapper = _styledComponents.default.div.withConfig({
   let {
     variant
   } = _ref9;
-  return variant === 'confirmation' ? '3.5rem' : '4rem';
+  return variant === 'confirmation' ? '0.75rem' : '1rem';
 }, _ref0 => {
   let {
     variant
   } = _ref0;
-  return variant === 'confirmation' ? '0.75rem' : '1rem';
+  return variant === 'confirmation' ? '4rem' : '5rem';
 }, _ref1 => {
   let {
     variant
@@ -89,12 +89,12 @@ const IconWrapper = _styledComponents.default.div.withConfig({
   let {
     variant
   } = _ref10;
-  return variant === 'confirmation' ? '4rem' : '5rem';
+  return variant === 'confirmation' ? '1rem' : '1.25rem';
 }, _ref11 => {
   let {
     variant
   } = _ref11;
-  return variant === 'confirmation' ? '1rem' : '1.25rem';
+  return variant === 'confirmation' ? '1.75rem' : '2rem';
 }, _ref12 => {
   let {
     variant
@@ -102,28 +102,28 @@ const IconWrapper = _styledComponents.default.div.withConfig({
   return variant === 'confirmation' ? '1.75rem' : '2rem';
 }, _ref13 => {
   let {
-    variant
+    themeColor
   } = _ref13;
-  return variant === 'confirmation' ? '1.75rem' : '2rem';
+  return themeColor;
 }, _ref14 => {
   let {
-    themeColor
+    variant
   } = _ref14;
-  return themeColor;
+  return variant === 'confirmation' ? '2rem' : '2.5rem';
 }, _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 => {
+})(["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;

package/dist/components/InfoPanel/InfoPanel.js

@@ -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;

package/dist/components/globalStyles.js

@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
 exports.GlobalStyle = void 0;
 var _styledComponents = require("styled-components");
 var _text = require("./text");
-const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(["*{font-size:14px;cursor:pointer}h1{", "}h2{", "}h3{", "}h4{", "}h5{", "}h6{", "}p{", "}input{", "}a{", "}"], _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a);
+const GlobalStyle = exports.GlobalStyle = (0, _styledComponents.createGlobalStyle)(["*{font-size:14px;cursor:pointer}h1{", "}h2{", "}h3{", "}h4{", "}h5{", "}h6{", "}p{", "}input{", "}a{", "}span{", "}"], _text.h1, _text.h2, _text.h3, _text.h4, _text.h5, _text.h6, _text.p, _text.input, _text.a, _text.span);

package/dist/components/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "BmAccordion", {
     return _Accordion.default;
   }
 });
+Object.defineProperty(exports, "BmAlertBox", {
+  enumerable: true,
+  get: function () {
+    return _Alert.default;
+  }
+});
 Object.defineProperty(exports, "BmAlertIcon", {
   enumerable: true,
   get: function () {
@@ -472,5 +478,6 @@ var _Card = require("./Card_v2/Card");
 var _InfoPanel = _interopRequireDefault(require("./InfoPanel/InfoPanel"));
 var _BmSelector = _interopRequireDefault(require("./BmSelector/BmSelector"));
 var _CustomCardTitle = _interopRequireDefault(require("./BmCustomCardTitle/CustomCardTitle"));
+var _Alert = _interopRequireDefault(require("./Alert/Alert"));
 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/dist/components/text.js

@@ -3,27 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
+exports.span = exports.p = exports.input = exports.h6 = exports.h5 = exports.h4 = exports.h3 = exports.h2 = exports.h1 = exports.a = void 0;
 var _typography = require("./typography");
 // 32px
-const h1 = exports.h1 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h1 = exports.h1 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 24px
-const h2 = exports.h2 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
+const h2 = exports.h2 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
 
 // 18px
-const h3 = exports.h3 = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h3 = exports.h3 = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 16px
-const h4 = exports.h4 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h4 = exports.h4 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-const h5 = exports.h5 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h5 = exports.h5 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 12px
-const h6 = exports.h6 = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const h6 = exports.h6 = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-const p = exports.p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-const input = exports.input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-const a = exports.a = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const p = exports.p = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const input = exports.input = " font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const a = exports.a = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
+const span = exports.span = "font-family: ".concat(_typography.Inter, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");

package/dist/components/typography.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
+exports.QuoteMark = exports.PullQuote = exports.PoppinsMedium = exports.Poppins = exports.P = exports.OpenSans = exports.Inter = exports.Hero = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = exports.Captions = void 0;
 const H1 = exports.H1 = '2.286rem';
 const H2 = exports.H2 = '1.714rem';
 const H3 = exports.H3 = '1.286rem';
@@ -17,4 +17,5 @@ const Captions = exports.Captions = '0.714rem';
 const Hero = exports.Hero = '1rem';
 const PoppinsMedium = exports.PoppinsMedium = 'PoppinsMedium';
 const Poppins = exports.Poppins = 'Poppins';
-const OpenSans = exports.OpenSans = 'OpenSans';
+const OpenSans = exports.OpenSans = 'OpenSans';
+const Inter = exports.Inter = 'Inter';

package/package.json

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

package/public/index.html

@@ -4,6 +4,7 @@
 <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap" rel="stylesheet">
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Web site created using create-react-app" />

package/src/App.js

@@ -1030,12 +1030,18 @@ const Chat = () => {
             icon={CalendarTodayOutlinedIcon}
             themeColor="#33B1BA"
             title="Book Your Medical Appointment"
-            description="Schedule a 30-minute consultation with our healthcare specialists"
+            description="Schedule a 30-minute consultation with our healThcare specialists"
             variant="booking"
             withStripe
           />
         </div>
         <div>
+          <BmInfoPanel.Section
+            title="Appointment Details"
+            icon={CalendarTodayOutlinedIcon}
+            backgroundColor="#fcba03"
+            iconColor="#fcba03"
+          />
           <BmCustomCardTitle
             icon={CheckIcon}
             themeColor="#33B1BA"
@@ -1090,12 +1096,12 @@ const Chat = () => {
               themeColor="#33B1BA"
             />
             {/* <BmInfoPanel>
-              <BmInfoPanel.Section
-                title="Appointment Details"
-                icon={CalendarTodayIcon}
-                backgroundColor="#fcba03"
-                iconColor="#fcba03"
-              >
+              // <BmInfoPanel.Section
+              //   title="Appointment Details"
+              //   icon={CalendarTodayIcon}
+              //   backgroundColor="#fcba03"
+              //   iconColor="#fcba03"
+              // >
                 <BmInfoPanel.SectionSummary
                   iconColor="#33B1BA"
                   textColor="#fcba03"

package/src/fonts.scss

@@ -25,4 +25,10 @@
 @font-face {
     font-family: 'OpenSans';
     src: url('../src/fonts/OpenSans-Regular.ttf');
+}
+
+
+@font-face {
+    font-family: 'Inter';
+    src: url('../src/fonts/Inter-regular.woff2')format('woff2'),url('../src/fonts/Inter-Bold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraBold.woff2')format('woff2'),url('../src/fonts/Inter-ExtraLight.woff2')format('woff2'),url('../src/fonts/Inter-medium.woff2')format('woff2'),url('../src/fonts/Inter-SemiBold.woff2')format('woff2');
 }

package/src/lib/components/Alert/Alert.js

@@ -85,7 +85,7 @@ const Description = styled.p`
   }
 `;
 
-const AlertBox = ({
+const BmAlertBox = ({
   icon: Icon,
   themeColor = '#EF4444',
   title,
@@ -108,4 +108,4 @@ const AlertBox = ({
   );
 };
 
-export default AlertBox;
+export default BmAlertBox;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import PersonIcon from '@mui/icons-material/Person';
 import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import AlertBox from './Alert';
+import BmAlertBox from './Alert';
 
 const iconOptions = {
   AccessTimeIcon,
@@ -14,7 +14,7 @@ const iconOptions = {
 const Template = (args) => {
   return (
     <div style={{ maxWidth: 500, margin: '2rem auto' }}>
-      <AlertBox {...args} />
+      <BmAlertBox {...args} />
     </div>
   );
 };
@@ -49,14 +49,14 @@ Default.argTypes = {
 };
 
 export default {
-  title: 'Components/AlertBox',
-  component: AlertBox,
+  title: 'Components/BmAlertBox',
+  component: BmAlertBox,
   argTypes: Default.argTypes,
 };
 
 export const Example = () => {
   return (
-    <AlertBox
+    <BmAlertBox
       icon={AccessTimeIcon}
       themeColor="#DC2626"
       title="Payment Error"

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

@@ -52,7 +52,6 @@ const CardContainer = styled.div`
 
 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;
@@ -88,6 +87,7 @@ const IconWrapper = styled.div`
 const Title = styled.h2`
   text-align: center;
   font-size: 1.125rem;
+  color: ${({ themeColor }) => themeColor};
   margin-bottom: ${({ variant }) =>
     variant === 'confirmation' ? '0.25rem' : '0.5rem'};
 

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

@@ -81,7 +81,7 @@ const SummarySubtitle = styled.p`
 `;
 
 const SectionContainer = styled.div`
-  padding: 0.75rem 1rem;
+  padding: 0.6rem 1rem;
   display: flex;
   align-items: center;
   gap: 0.5rem;

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

package/src/lib/components/index.js

@@ -82,6 +82,7 @@ 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,4 +162,5 @@ export {
   BmProgressIndicator,
   BmSelector,
   BmCustomCardTitle,
+  BmAlertBox,
 };

package/src/lib/components/text.js

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

package/src/lib/components/typography.js

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