beem-component 2.0.27 → 2.1.0

package/dist/components/navbar.js

@@ -7,45 +7,38 @@ exports.OldBmNavbar = exports.GlobalNavbarWrapper = exports.BmNavbarSearch = exp
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("./colors");
 var _search = require("./search");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // import React from 'react';
 
 // Old with NavbarContent Main wrapper for navbar
-var BmNavbar = _styledComponents.default.div.withConfig({
+const BmNavbar = exports.BmNavbar = _styledComponents.default.div.withConfig({
   displayName: "navbar__BmNavbar"
 })(["background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);padding:0rem 2.5rem !important;flex-wrap:wrap;", "}"], _colors.BmPrimaryWhite, '' /* width: 100vw; */);
 
 //  Spacing between the contents of navbar
-exports.BmNavbar = BmNavbar;
-var BmNavbarItems = _styledComponents.default.div.withConfig({
+const BmNavbarItems = exports.BmNavbarItems = _styledComponents.default.div.withConfig({
   displayName: "navbar__BmNavbarItems"
 })(["display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:1.429rem 0rem !important;flex-wrap:wrap;"]);
-exports.BmNavbarItems = BmNavbarItems;
-var GlobalNavbarWrapper = _styledComponents.default.div.withConfig({
+const GlobalNavbarWrapper = exports.GlobalNavbarWrapper = _styledComponents.default.div.withConfig({
   displayName: "navbar__GlobalNavbarWrapper"
 })(["display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;"]);
 
 // Main wrapper for navbar
-exports.GlobalNavbarWrapper = GlobalNavbarWrapper;
-var OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+const OldBmNavbar = exports.OldBmNavbar = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
   displayName: "navbar__OldBmNavbar"
 })(["flex-direction:row;padding:1.429rem 2.5rem !important;background:", ";box-shadow:0rem 0.286rem 0.214rem rgba(0,0,0,0.25);}"], _colors.BmPrimaryWhite);
 
 // Navbar Profile Icon Wrapper
-exports.OldBmNavbar = OldBmNavbar;
-var BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+const BmNavBarProfile = exports.BmNavBarProfile = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
   displayName: "navbar__BmNavBarProfile"
 })(["@media (max-width:768px){display:none !important;}"]);
 
 // Navbar Search Icon Wrapper
-exports.BmNavBarProfile = BmNavBarProfile;
-var BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch).withConfig({
+const BmNavbarSearch = exports.BmNavbarSearch = (0, _styledComponents.default)(_search.BmSearch).withConfig({
   displayName: "navbar__BmNavbarSearch"
 })(["width:30vw;@media (max-width:768px){display:none !important;}"]);
 
 // Navbar Logo Icon Wrapper
-exports.BmNavbarSearch = BmNavbarSearch;
-var BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
+const BmNavbarLogo = exports.BmNavbarLogo = (0, _styledComponents.default)(GlobalNavbarWrapper).withConfig({
   displayName: "navbar__BmNavbarLogo"
-})([""]);
-exports.BmNavbarLogo = BmNavbarLogo;
+})([""]);

package/dist/components/search.js

@@ -9,33 +9,35 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _colors = require("./colors");
 var _dropdown = require("./dropdown");
 var _iconStyles = require("./iconStyles");
-var _excluded = ["dropdown"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-var BmSearchField = _styledComponents.default.input.withConfig({
+const _excluded = ["dropdown"];
+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); }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+const BmSearchField = _styledComponents.default.input.withConfig({
   displayName: "search__BmSearchField"
-})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, function (props) {
-  return props.dropdown === 'yes' && 'margin-right: 1.714rem;';
-});
-var BmSearchWrapper = _styledComponents.default.div.withConfig({
+})(["color:", ";border:none;padding:0rem;&:visited,&:active,&:hover,&:focus{outline:none !important;text-decoration:none;color:", ";}", ""], _colors.BmSecondaryGrey, _colors.BmPrimaryBlack, props => props.dropdown === 'yes' && 'margin-right: 1.714rem;');
+const BmSearchWrapper = _styledComponents.default.div.withConfig({
   displayName: "search__BmSearchWrapper"
-})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, '' /* height: 2.929rem; */, function (_ref) {
-  var dropdown = _ref.dropdown;
+})(["display:flex;flex-direction:row;align-items:center;background:", ";border:0.071rem solid ", ";box-sizing:border-box;border-radius:0.25rem;", " padding:", ";"], _colors.BmPrimaryWhite, _colors.BmGrey400, '' /* height: 2.929rem; */, _ref => {
+  let {
+    dropdown
+  } = _ref;
   if (dropdown === 'yes') {
     return '0rem 0rem 0rem 1.143rem';
   }
   return '0.786rem 1.143rem';
 });
-var BmStretch = _styledComponents.default.div.withConfig({
+const BmStretch = _styledComponents.default.div.withConfig({
   displayName: "search__BmStretch"
 })(["display:flex;flex-direction:row;"]);
-var SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
+const SearchIcon = (0, _styledComponents.default)(_iconStyles.BmSearchIcon).withConfig({
   displayName: "search__SearchIcon"
 })(["margin-right:0.714rem;display:flex;"]);
-var BmSearch = function BmSearch(_ref2) {
-  var dropdown = _ref2.dropdown,
+const BmSearch = _ref2 => {
+  let {
+      dropdown
+    } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(BmStretch, rest, /*#__PURE__*/_react.default.createElement(BmSearchWrapper, _extends({
     dropdown: dropdown

package/dist/components/shadow.js

@@ -4,5 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BmGeneralShadow = void 0;
-var BmGeneralShadow = '0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25)';
-exports.BmGeneralShadow = BmGeneralShadow;
+const BmGeneralShadow = exports.BmGeneralShadow = '0rem 0.286rem 0.286rem rgba(0, 0, 0, 0.25)';

package/dist/components/text.js

@@ -6,33 +6,24 @@ Object.defineProperty(exports, "__esModule", {
 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
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 2.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 24px
-exports.h1 = h1;
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.714rem;\nletter-spacing: -0.02em;\nmargin: 0rem;");
 
 // 18px
-exports.h2 = h2;
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.286rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 16px
-exports.h3 = h3;
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1.143rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-exports.h4 = h4;
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 12px
-exports.h5 = h5;
-var 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.OpenSans, ";\nfont-style: normal;\nfont-weight: 500;\nfont-size: .857rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
 
 // 14px
-exports.h6 = h6;
-var p = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-exports.p = p;
-var input = " font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-exports.input = input;
-var a = "font-family: ".concat(_typography.OpenSans, ";\nfont-style: normal;\nfont-weight: normal;\nfont-size: 1rem;\nletter-spacing: -0.02rem;\nmargin: 0rem;");
-exports.a = a;
+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;");

package/dist/components/typography.js

@@ -4,31 +4,17 @@ 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;
-var H1 = '2.286rem';
-exports.H1 = H1;
-var H2 = '1.714rem';
-exports.H2 = H2;
-var H3 = '1.286rem';
-exports.H3 = H3;
-var H4 = '1.143rem';
-exports.H4 = H4;
-var H5 = '0.857rem';
-exports.H5 = H5;
-var H6 = '0.714rem';
-exports.H6 = H6;
-var P = '0.929rem';
-exports.P = P;
-var QuoteMark = '3.429rem';
-exports.QuoteMark = QuoteMark;
-var PullQuote = '1.286rem';
-exports.PullQuote = PullQuote;
-var Captions = '0.714rem';
-exports.Captions = Captions;
-var Hero = '1rem';
-exports.Hero = Hero;
-var PoppinsMedium = 'PoppinsMedium';
-exports.PoppinsMedium = PoppinsMedium;
-var Poppins = 'Poppins';
-exports.Poppins = Poppins;
-var OpenSans = 'OpenSans';
-exports.OpenSans = OpenSans;
+const H1 = exports.H1 = '2.286rem';
+const H2 = exports.H2 = '1.714rem';
+const H3 = exports.H3 = '1.286rem';
+const H4 = exports.H4 = '1.143rem';
+const H5 = exports.H5 = '0.857rem';
+const H6 = exports.H6 = '0.714rem';
+const P = exports.P = '0.929rem';
+const QuoteMark = exports.QuoteMark = '3.429rem';
+const PullQuote = exports.PullQuote = '1.286rem';
+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';

package/dist/components/wrapper.js

@@ -5,12 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.BmChatMenuWrapper = exports.BmChatInfoWrapper = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var BmChatInfoWrapper = _styledComponents.default.div.withConfig({
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const BmChatInfoWrapper = exports.BmChatInfoWrapper = _styledComponents.default.div.withConfig({
   displayName: "wrapper__BmChatInfoWrapper"
 })(["display:flex;flex-direction:column;max-height:100%;height:100%;flex-grow:1;max-width:75%;width:75%;", " max-height:100%;height:100%;"], '' /* border: 0.714rem solid orange; */);
-exports.BmChatInfoWrapper = BmChatInfoWrapper;
-var BmChatMenuWrapper = _styledComponents.default.div.withConfig({
+const BmChatMenuWrapper = exports.BmChatMenuWrapper = _styledComponents.default.div.withConfig({
   displayName: "wrapper__BmChatMenuWrapper"
-})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], '' /* border: 0.714rem solid orange; */);
-exports.BmChatMenuWrapper = BmChatMenuWrapper;
+})(["display:flex;flex-direction:row;justify-content:space-between;max-height:100%;height:100%;max-width:100%;width:100%;", " max-height:85%;height:85%;"], '' /* border: 0.714rem solid orange; */);

package/nginx.conf

@@ -1,17 +1,31 @@
-server {
-    listen 8085;
-    root   /usr/share/nginx/html;
+# server {
+#     listen 8085;
+#     root   /usr/share/nginx/html;
 
-    index  index.html index.htm;
+#     index  index.html index.htm;
     
-    include /etc/nginx/mime.types;
+#     include /etc/nginx/mime.types;
     
-    gzip on;
-    gzip_min_length 1000;
-    gzip_proxied expired no-cache no-store private auth;
-    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
+#     gzip on;
+#     gzip_min_length 1000;
+#     gzip_proxied expired no-cache no-store private auth;
+#     gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 
     
-    location / {
-        try_files $uri $uri/ /index.html;
-    }
+#     location / {
+#         try_files $uri $uri/ /index.html;
+#     }
+# }
+
+
+# nginx.conf
+server {
+  listen 3000;
+  server_name localhost;
+
+  root /usr/share/nginx/html;
+  index index.html;
+
+  location / {
+    try_files $uri $uri/ /index.html;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beem-component",
-  "version": "2.0.27",
+  "version": "2.1.0",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {
@@ -48,6 +48,8 @@
     "@material-ui/icons": "^4.11.2",
     "@mui/icons-material": "^5.2.1",
     "@mui/material": "^5.2.3",
+    "ajv": "^8.17.1",
+    "ajv-keywords": "^5.1.0",
     "bootstrap": "^5.3.3",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",

package/src/App.js

@@ -1,10 +1,15 @@
+/* eslint-disable jsx-a11y/control-has-associated-label */
 // * eslint-disable func-style *
 /* eslint-disable jsx-a11y/media-has-caption */
-import React from 'react';
+import React, { useState } from 'react';
 // import AbcIcon from '@mui/icons-material/Abc';
 // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
-
+// import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+// import PersonIcon from '@mui/icons-material/Person';
 // import { Tooltip } from '@mui/material';
+import PeopleIcon from '@mui/icons-material/People';
+// import BusinessIcon from '@mui/icons-material/Business';
 
 import {
   BmChat,
@@ -21,7 +26,15 @@ import {
   // BmContactCheckbox,
   // BmCounter,
   // BmProfileIcon,
+  BmProgressIndicator,
+  BmLabelWithIcon,
+  BmCardv2,
+  // BmInfoPanel,
+  BmButton,
+  BmSelectionNotice,
+  BmSelector,
 } from './lib/components';
+// import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
 //   dotgoV2: {
@@ -113,6 +126,12 @@ const Chat = () => {
         '{"dotgoV2":{"type":"list","title":"","body":"Hey Abdallah,\\n\\n*Welcome to Zuri House Of Beauty* \\n\\nWe offer a range of styles designed by Black women for Black women. Our platform, brand, and financing solutions promote economic mobility for Black women entrepreneurs. \\n\\nHow can I assist you today?","globalButtons":[{"type":"text","title":"Browse Services"}],"items":[{"title":"Browse Services","subtitle":"","options":[{"type":"text","title":"View Products","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Track Order","description":"Enter order id for status","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Support","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Feedback","description":"Give feedback","postbackText":"bm-feedback|0|bf5ff7a3-6425-484e-9b7b-6104ec774bff"},{"type":"text","title":"Ask us anything","description":"","postbackText":"section 1 row 1 postback payload"}]}]}}',
     },
   };
+  const steps = [
+    { key: 'step1', label: 'Start' },
+    { key: 'step2', label: 'Details' },
+    { key: 'step3', label: 'Review' },
+    { key: 'step4', label: 'Complete' },
+  ];
 
   const messages = [
     {
@@ -891,11 +910,236 @@ const Chat = () => {
 
   // Handler function for the checkbox change event
 
+  const [currentStep, setCurrentStep] = useState(1);
+
+  // const appointmentDetails = {
+  //   title: 'Consultation',
+  //   duration: '30 mins',
+  // };
+  // const [selected, setSelected] = useState('');
+  // const slots = [
+  //   {
+  //     label: '10:00 AM - 10:30 AM',
+  //     value: { startDate: '10:00 AM', endDate: '10:30 AM' },
+  //   },
+  //   {
+  //     label: '10:30 AM - 11:10 AM',
+  //     value: { startDate: '10:30 AM', endDate: '11:00 AM' },
+  //   },
+  // ];
+  // console.log({ selected });
+
+  // const formData = {
+  //   departmentName: 'Marketing',
+  //   resourceName: 'John Doe',
+  //   date: new Date(),
+  //   timeSlot: '09:00 - 09:30',
+  //   name: 'Jane Smith',
+  //   phone: '+1234567890',
+  //   email: 'jane.smith@example.com',
+  // };
+  const slots = [
+    {
+      id: 'slot-1', // ⚠️ id is required
+      label: '10:00 AM - 10:30 AM',
+      value: { startDate: '10:00 AM', endDate: '10:30 AM' },
+    },
+    {
+      id: 'slot-2',
+      label: '10:30 AM - 11:10 AM',
+      value: { startDate: '10:30 AM', endDate: '11:10 AM' },
+    },
+    {
+      id: 'slot-3',
+      label: '11:10 AM - 11:50 AM',
+      value: { startDate: '11:10 AM', endDate: '11:50 AM' },
+    },
+    {
+      id: 'slot-4',
+      label: '11:50 AM - 12:30 PM',
+      value: { startDate: '11:50 AM', endDate: '12:30 PM' },
+    },
+    {
+      id: 'slot-5',
+      label: '12:30 PM - 1:10 PM',
+      value: { startDate: '12:30 PM', endDate: '1:10 PM' },
+    },
+    {
+      id: 'slot-6',
+      label: '1:10 PM - 1:50 PM',
+      value: { startDate: '1:10 PM', endDate: '1:50 PM' },
+    },
+    {
+      id: 'slot-7',
+      label: '1:50 PM - 2:30 PM',
+      value: { startDate: '1:50 PM', endDate: '2:30 PM' },
+    },
+    {
+      id: 'slot-8',
+      label: '2:30 PM - 3:10 PM',
+      value: { startDate: '2:30 PM', endDate: '3:10 PM' },
+    },
+    {
+      id: 'slot-9',
+      label: '3:10 PM - 3:50 PM',
+      value: { startDate: '3:10 PM', endDate: '3:50 PM' },
+    },
+    {
+      id: 'slot-10',
+      label: '3:50 PM - 4:30 PM',
+      value: { startDate: '3:50 PM', endDate: '4:30 PM' },
+    },
+    {
+      id: 'slot-11',
+      label: '4:30 PM - 5:10 PM',
+      value: { startDate: '4:30 PM', endDate: '5:10 PM' },
+    },
+    {
+      id: 'slot-12',
+      label: '5:10 PM - 5:50 PM',
+      value: { startDate: '5:10 PM', endDate: '5:50 PM' },
+    },
+  ];
+
+  const [selectedSlotId, setSelectedSlotId] = useState(null);
+  console.log({ selectedSlotId });
   return (
     <>
       <GlobalStyle />
 
+      <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
+        <div style={{ padding: '2rem' }}>
+          <h1>Progress Indicator Demo</h1>
+
+          <BmProgressIndicator
+            steps={steps}
+            currentStep={currentStep}
+            primaryColor="#10b981"
+            className="green" // Optional: for color themes defined in the styled component
+          />
+
+          {/* <div style={{ marginTop: '2rem' }}>
+            <button
+              type="button"
+              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
+              }
+            >
+              Next
+            </button>
+          </div> */}
+        </div>
+        <BmCardv2 borderColor="#33B1BA" borderWidth="1.5px">
+          <BmCardv2.Header>
+            <BmCardv2.Title>Profile</BmCardv2.Title>
+            <BmCardv2.Description>
+              Manage your settings below
+            </BmCardv2.Description>
+          </BmCardv2.Header>
+          <BmCardv2.Content>
+            <BmSelector
+              data={slots}
+              selectedDataId={selectedSlotId}
+              onChange={setSelectedSlotId}
+              icon={AccessTimeIcon}
+              themeColor="#33B1BA"
+            />
+            {/* <BmInfoPanel>
+              <BmInfoPanel.Section
+                title="Appointment Details"
+                icon={CalendarTodayIcon}
+                backgroundColor="#fcba03"
+                iconColor="#fcba03"
+              >
+                <BmInfoPanel.SectionSummary
+                  iconColor="#33B1BA"
+                  textColor="#fcba03"
+                  icon={CalendarTodayIcon}
+                  title={formData.departmentName}
+                  subtitle="Department"
+                  // iconBackgroundColor
+                />
+                <BmInfoPanel.SectionSummary
+                  icon={BusinessIcon}
+                  title={formData.departmentName}
+                  subtitle="Department"
+                />
+              </BmInfoPanel.Section>
+            </BmInfoPanel> */}
+          </BmCardv2.Content>
+          <BmCardv2.Footer>
+            <BmButton
+              width="100%"
+              size="medium"
+              borderColor="#33b1ba33"
+              color="#000000"
+              variant="secondary"
+              type="button"
+              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
+            >
+              Cancel
+            </BmButton>
+            <BmButton
+              width="100%"
+              size="medium"
+              type="button"
+              onClick={() =>
+                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
+              }
+            >
+              Save
+            </BmButton>
+          </BmCardv2.Footer>
+        </BmCardv2>
+      </div>
       <div>
+        <BmLabelWithIcon
+          textColor="#fcba03"
+          icon={PeopleIcon}
+          iconColor="#fffff"
+          iconSize="16px"
+        >
+          <p>yooo</p>&nbsp;<h4>Team: Engineering</h4>
+        </BmLabelWithIcon>
+
+        <div>
+          <BmSelectionNotice color="#ff6600">
+            This is a <strong>warning</strong> notice.
+          </BmSelectionNotice>
+        </div>
+        <div style={{ padding: '2rem' }}>
+          <h1>Progress Indicator Demo</h1>
+
+          <BmProgressIndicator
+            steps={steps}
+            currentStep={currentStep}
+            primaryColor="#10b981"
+            className="green" // Optional: for color themes defined in the styled component
+          />
+
+          <div style={{ marginTop: '2rem' }}>
+            <button
+              type="button"
+              onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
+            >
+              Previous
+            </button>
+            <button
+              type="button"
+              onClick={() =>
+                setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
+              }
+            >
+              Next
+            </button>
+          </div>
+        </div>
         <BmChat.Details
           key={85279}
           state="inbound"
@@ -1312,7 +1556,6 @@ const Chat = () => {
           ))}
         </BmChat.Body>
       </BmChat> */}
-
       <BmChat>
         <BmChat.Body>
           {messages.map((ms) => {