beem-component 2.1.10 → 2.1.12

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

@@ -147,6 +147,9 @@ const Description = _styledComponents.default.p.withConfig({
   } = _ref20;
   return variant === 'confirmation' ? '0.875rem' : '1rem';
 });
+const ImageWrapper = _styledComponents.default.div.withConfig({
+  displayName: "CustomCardTitle__ImageWrapper"
+})(["width:100%;aspect-ratio:1 / 1;overflow:hidden;border-radius:0.75rem;margin-top:1rem;img{width:100%;height:100%;object-fit:cover;display:block;}"]);
 const BmCustomCardTitle = _ref21 => {
   let {
     icon: Icon,
@@ -154,7 +157,8 @@ const BmCustomCardTitle = _ref21 => {
     title,
     description,
     variant = 'booking',
-    withStripe = false
+    withStripe = false,
+    imageSrc
   } = _ref21;
   const content = /*#__PURE__*/_react.default.createElement(CardContainer, {
     variant: variant
@@ -165,7 +169,10 @@ const BmCustomCardTitle = _ref21 => {
     variant: variant
   }, title), description && /*#__PURE__*/_react.default.createElement(Description, {
     variant: variant
-  }, description));
+  }, description), imageSrc && /*#__PURE__*/_react.default.createElement(ImageWrapper, null, /*#__PURE__*/_react.default.createElement("img", {
+    src: imageSrc,
+    alt: title || 'Card image'
+  })));
   return withStripe ? /*#__PURE__*/_react.default.createElement(BackgroundStripe, {
     themeColor: themeColor,
     variant: variant

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

@@ -20,6 +20,7 @@ const iconOptions = {
   Clock: _AccessTime.default,
   Heart: _Favorite.default
 };
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = args => {
   return /*#__PURE__*/_react.default.createElement("div", {
     style: {
@@ -35,7 +36,8 @@ Default.args = {
   title: 'Book Your Medical Appointment',
   description: 'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
-  withStripe: true
+  withStripe: true,
+  imageSrc: imgs
 };
 Default.argTypes = {
   icon: {
@@ -65,6 +67,10 @@ Default.argTypes = {
     control: {
       type: 'boolean'
     }
+  },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card'
   }
 };
 var _default = exports.default = {
@@ -73,13 +79,14 @@ var _default = exports.default = {
   argTypes: Default.argTypes
 };
 const Example = () => {
-  /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, {
+  return /*#__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
+    withStripe: true,
+    imageSrc: imgs
   });
 };
 exports.Example = Example;

package/dist/components/BmTabv2/BmTabv2.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const TabsContainer = _styledComponents.default.div.withConfig({
+  displayName: "BmTabv2__TabsContainer"
+})(["width:100%;"]);
+const TabsHeader = _styledComponents.default.div.withConfig({
+  displayName: "BmTabv2__TabsHeader"
+})(["display:flex;justify-content:flex-start;align-items:center;margin-bottom:14px;padding:0 14px;border-radius:var(--radius-lg,12px);flex-wrap:wrap;"]);
+const TabsList = _styledComponents.default.div.withConfig({
+  displayName: "BmTabv2__TabsList"
+})(["display:inline-flex;background-color:var(--color-muted,#f2f2f2);color:var(--color-muted-foreground,#666);align-items:center;justify-content:center;border-radius:var(--radius-lg,12px);padding:4px 4px;"]);
+const TabsTriggerButton = _styledComponents.default.button.withConfig({
+  displayName: "BmTabv2__TabsTriggerButton"
+})(["display:inline-flex;flex:1;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;border-radius:var(--radius-lg,12px);padding:6px 12px;font-size:14px;font-weight:500;white-space:nowrap;transition:color 0.2s,box-shadow 0.2s,background-color 0.2s;cursor:pointer;", " &:focus-visible{outline:none;border-color:var(--color-ring,#2684ff);box-shadow:0 0 0 3px rgba(38,132,255,0.3);}&:disabled{pointer-events:none;opacity:0.5;}svg{flex-shrink:0;pointer-events:none;width:16px;height:16px;}"], _ref => {
+  let {
+    active
+  } = _ref;
+  return active ? (0, _styledComponents.css)(["background-color:var(--color-card,#fff);color:var(--color-foreground,#000);border-color:var(--color-border,#ddd);"]) : (0, _styledComponents.css)(["background-color:transparent;color:var(--color-muted-foreground,#666);"]);
+});
+const IconWrapper = _styledComponents.default.span.withConfig({
+  displayName: "BmTabv2__IconWrapper"
+})(["display:flex;align-items:center;justify-content:center;"]);
+const BmCustomTab = _ref2 => {
+  let {
+    value,
+    onValueChange,
+    tabs = [],
+    className
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(TabsContainer, {
+    className: className
+  }, /*#__PURE__*/_react.default.createElement(TabsHeader, null, /*#__PURE__*/_react.default.createElement(TabsList, null, tabs.map(tab => {
+    const Icon = tab.icon;
+    return /*#__PURE__*/_react.default.createElement(TabsTriggerButton, {
+      key: tab.value,
+      active: value === tab.value,
+      onClick: () => onValueChange(tab.value)
+    }, Icon && /*#__PURE__*/_react.default.createElement(IconWrapper, null, /*#__PURE__*/_react.default.createElement(Icon, {
+      fontSize: "small"
+    })), /*#__PURE__*/_react.default.createElement("span", null, tab.label));
+  }))));
+};
+var _default = exports.default = BmCustomTab;

package/dist/components/BmTabv2/BmTabv2.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExampleTabs = exports.ExampleCustomTabsUsage = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
+var _Group = _interopRequireDefault(require("@mui/icons-material/Group"));
+var _Business = _interopRequireDefault(require("@mui/icons-material/Business"));
+var _BmTabv = _interopRequireDefault(require("./BmTabv2"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const ExampleCustomTabsUsage = () => {
+  const [activeTab, setActiveTab] = (0, _react.useState)('departments');
+  const tabs = [{
+    value: 'departments',
+    label: 'Departments',
+    icon: _Business.default
+  }, {
+    value: 'resources',
+    label: 'Resources',
+    icon: _Group.default
+  }, {
+    value: 'events',
+    label: 'Events',
+    icon: _CalendarTodayOutlined.default
+  }];
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      padding: 20
+    }
+  }, /*#__PURE__*/_react.default.createElement(_BmTabv.default, {
+    value: activeTab,
+    onValueChange: setActiveTab,
+    tabs: tabs
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 20
+    }
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "Current Tab:"), " ", activeTab));
+};
+exports.ExampleCustomTabsUsage = ExampleCustomTabsUsage;
+var _default = exports.default = {
+  title: 'Components/CustomTabs',
+  component: _BmTabv.default
+};
+const ExampleTabs = () => {
+  const [activeTab, setActiveTab] = (0, _react.useState)('departments');
+  const tabs = [{
+    value: 'departments',
+    label: 'Departments',
+    icon: _Business.default
+  }, {
+    value: 'resources',
+    label: 'Resources',
+    icon: _Group.default
+  }, {
+    value: 'events',
+    label: 'Events',
+    icon: _CalendarTodayOutlined.default
+  }];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_BmTabv.default, {
+    value: activeTab,
+    onValueChange: setActiveTab,
+    tabs: tabs
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: '20px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("p", null, "You have selected: ", /*#__PURE__*/_react.default.createElement("strong", null, activeTab))));
+};
+exports.ExampleTabs = ExampleTabs;

package/dist/components/HorizontalCard/HorizontalCard.js

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

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

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

package/dist/components/index.js

@@ -178,6 +178,12 @@ Object.defineProperty(exports, "BmCustomCardTitle", {
     return _CustomCardTitle.default;
   }
 });
+Object.defineProperty(exports, "BmCustomTab", {
+  enumerable: true,
+  get: function () {
+    return _BmTabv.default;
+  }
+});
 Object.defineProperty(exports, "BmDepartmentCard", {
   enumerable: true,
   get: function () {
@@ -202,6 +208,12 @@ Object.defineProperty(exports, "BmFooterRight", {
     return _ContentTitle.BmFooterRight;
   }
 });
+Object.defineProperty(exports, "BmHorizontalCard", {
+  enumerable: true,
+  get: function () {
+    return _HorizontalCard.default;
+  }
+});
 Object.defineProperty(exports, "BmIcons", {
   enumerable: true,
   get: function () {
@@ -493,5 +505,7 @@ var _CustomCardTitle = _interopRequireDefault(require("./BmCustomCardTitle/Custo
 var _Alert = _interopRequireDefault(require("./Alert/Alert"));
 var _DepartmentCard = _interopRequireDefault(require("./DepartmentCard/DepartmentCard"));
 var _ResourceCard = _interopRequireDefault(require("./ResourceCard/ResourceCard"));
+var _BmTabv = _interopRequireDefault(require("./BmTabv2/BmTabv2"));
+var _HorizontalCard = _interopRequireDefault(require("./HorizontalCard/HorizontalCard"));
 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.10",
+  "version": "2.1.12",
   "private": false,
   "main": "dist/components/index.js",
   "scripts": {

package/src/App.js

@@ -8,6 +8,10 @@ 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 GroupIcon from '@mui/icons-material/Group';
+import BusinessIcon from '@mui/icons-material/Business';
+
 import CheckIcon from '@mui/icons-material/Check';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -41,9 +45,11 @@ import {
   BmCustomCardTitle,
   BmDepartmentCard,
   BmResourceCard,
+  BmCustomTab,
+  BmHorizontalCard,
 } from './lib/components';
 import AlertBox from './lib/components/Alert/Alert';
-import { TabPanel, Tabs } from './lib/components/BmTabv2/BmTabV2.';
+
 // import ProgressIndicator from './lib/components/newProgress';
 
 // const datsa = JSON.stringify({
@@ -64,6 +70,11 @@ import { TabPanel, Tabs } from './lib/components/BmTabv2/BmTabV2.';
 //   },
 // });
 // console.log(datsa);
+const tabs = [
+  { value: 'departments', label: 'Departments', icon: BusinessIcon },
+  { value: 'resources', label: 'Resources', icon: GroupIcon },
+  { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+];
 const Chat = () => {
   const message = {
     id: 75681,
@@ -1010,24 +1021,91 @@ const Chat = () => {
       value: { startDate: '5:10 PM', endDate: '5:50 PM' },
     },
   ];
+  const sampleAppointmentTypes = [
+    {
+      id: 1,
+      name: 'ConsulTation Call',
+      description: 'Discuss project requirements and timelines.',
+      price: 0,
+      color: '#3b82f6', // blue
+      isActive: true,
+      location: 'Virtual',
+      paymentSettings: { requirePayment: false },
+      selectedResources: [],
+      address: '',
+      duration: '60', // in minutes
+      guest_limit: '2', // max number of guests allowed
+    },
+    {
+      id: 2,
+      name: 'Strategy Session',
+      description: 'Deep dive session for business strategy and growth.',
+      price: 150,
+      color: '#10b981', // green
+      isActive: true,
+      location: 'Physical',
+      paymentSettings: { requirePayment: true },
+      selectedResources: [{ id: 1 }],
+      address: '456 Innovation Avenue, Tech City',
+      duration: '90', // in minutes
+      guest_limit: '5', // max number of guests allowed
+    },
+    {
+      id: 3,
+      name: 'Follow-up Meeting',
+      description: 'Review progress and next steps with the team.',
+      price: 75,
+      color: '#f59e0b', // amber
+      isActive: false,
+      location: 'Virtual',
+      paymentSettings: { requirePayment: true },
+      selectedResources: [{ id: 1 }, { id: 2 }],
+      address: '',
+      duration: '30', // in minutes
+    },
+  ];
 
   const [selectedSlotId, setSelectedSlotId] = useState(null);
   console.log({ selectedSlotId });
+  const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
+  const [activeTab, setActiveTab] = useState('departments');
+  const handleView = (id) => console.log('View', id);
+  const handleDelete = (type) => console.log('Delete', type);
+  const handleCopyLink = (id) => console.log('Copy Link', id);
   return (
     <>
       <GlobalStyle />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-        <Tabs defaultValue={0}>
-          <TabPanel title="Overview">
-            <p>This is the Overview content.</p>
-          </TabPanel>
-          <TabPanel title="Details">
-            <p>This is the Details content.</p>
-          </TabPanel>
-          <TabPanel title="Settings">
-            <p>This is the Settings content.</p>
-          </TabPanel>
-        </Tabs>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+          {sampleAppointmentTypes.map((type) => (
+            <BmHorizontalCard
+              name={type.name}
+              description={type.description}
+              price={type.price}
+              color={type.color}
+              isActive={type.isActive}
+              location={type.location}
+              paymentSettings={type.paymentSettings}
+              selectedResources={type.selectedResources}
+              address={type.address}
+              duration={type.duration}
+              guest_limit={type.guest_limit}
+              key={type.id}
+              onView={() => handleView(type.id)}
+              onDelete={() => handleDelete(type)}
+              onCopyLink={() => handleCopyLink(type.id)}
+              data={type}
+            />
+          ))}
+        </div>
+
+        <BmCustomTab
+          value={activeTab}
+          onValueChange={setActiveTab}
+          tabs={tabs}
+          className="event-types-tabs"
+        />
+
         <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
           <div style={{ maxWidth: 400, margin: '2rem auto' }}>
             <BmDepartmentCard
@@ -1098,6 +1176,7 @@ const Chat = () => {
             description="Schedule a 30-minute consultation with our healThcare specialists"
             variant="booking"
             withStripe
+            imageSrc={imgs}
           />
         </div>
         <div>

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

@@ -110,6 +110,20 @@ const Description = styled.p`
   }
 `;
 
+const ImageWrapper = styled.div`
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  overflow: hidden;
+  border-radius: 0.75rem;
+  margin-top: 1rem;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+`;
 const BmCustomCardTitle = ({
   icon: Icon,
   themeColor = '#33B1BA',
@@ -117,6 +131,7 @@ const BmCustomCardTitle = ({
   description,
   variant = 'booking',
   withStripe = false,
+  imageSrc,
 }) => {
   const content = (
     <CardContainer variant={variant}>
@@ -127,6 +142,11 @@ const BmCustomCardTitle = ({
       {description && (
         <Description variant={variant}>{description}</Description>
       )}
+      {imageSrc && (
+        <ImageWrapper>
+          <img src={imageSrc} alt={title || 'Card image'} />
+        </ImageWrapper>
+      )}
     </CardContainer>
   );
 

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

@@ -15,6 +15,7 @@ const iconOptions = {
   Heart: FavoriteIcon,
 };
 
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
 const Template = (args) => {
   return (
     <div style={{ maxWidth: 500, margin: '2rem auto' }}>
@@ -32,6 +33,7 @@ Default.args = {
     'Schedule a 30-minute consultation with our healthcare specialists',
   variant: 'booking',
   withStripe: true,
+  imageSrc: imgs,
 };
 
 Default.argTypes = {
@@ -63,6 +65,10 @@ Default.argTypes = {
       type: 'boolean',
     },
   },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card',
+  },
 };
 
 export default {
@@ -72,12 +78,15 @@ export default {
 };
 
 export const Example = () => {
-  <BmCustomCardTitle
-    icon={CalendarTodayOutlinedIcon}
-    themeColor="#33B1BA"
-    title="Book Your Medical Appointment"
-    description="Schedule a 30-minute consultation with our healthcare specialists"
-    variant="booking"
-    withStripe
-  />;
+  return (
+    <BmCustomCardTitle
+      icon={CalendarTodayOutlinedIcon}
+      themeColor="#33B1BA"
+      title="Book Your Medical Appointment"
+      description="Schedule a 30-minute consultation with our healthcare specialists"
+      variant="booking"
+      withStripe
+      imageSrc={imgs}
+    />
+  );
 };

package/src/lib/components/BmTabv2/BmTabv2.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+const TabsContainer = styled.div`
+  width: 100%;
+`;
+
+const TabsHeader = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin-bottom: 14px;
+  padding: 0 14px;
+  border-radius: var(--radius-lg, 12px);
+  flex-wrap: wrap;
+`;
+
+const TabsList = styled.div`
+  display: inline-flex;
+  background-color: var(--color-muted, #f2f2f2);
+  color: var(--color-muted-foreground, #666);
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-lg, 12px);
+  padding: 4px 4px;
+`;
+
+const TabsTriggerButton = styled.button`
+  display: inline-flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  border-radius: var(--radius-lg, 12px);
+  padding: 6px 12px;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;
+  cursor: pointer;
+
+  ${({ active }) =>
+    active
+      ? css`
+          background-color: var(--color-card, #fff);
+          color: var(--color-foreground, #000);
+          border-color: var(--color-border, #ddd);
+        `
+      : css`
+          background-color: transparent;
+          color: var(--color-muted-foreground, #666);
+        `}
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--color-ring, #2684ff);
+    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.3);
+  }
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  svg {
+    flex-shrink: 0;
+    pointer-events: none;
+    width: 16px;
+    height: 16px;
+  }
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const BmCustomTab = ({ value, onValueChange, tabs = [], className }) => {
+  return (
+    <TabsContainer className={className}>
+      <TabsHeader>
+        <TabsList>
+          {tabs.map((tab) => {
+            const Icon = tab.icon;
+            return (
+              <TabsTriggerButton
+                key={tab.value}
+                active={value === tab.value}
+                onClick={() => onValueChange(tab.value)}
+              >
+                {Icon && (
+                  <IconWrapper>
+                    <Icon fontSize="small" />
+                  </IconWrapper>
+                )}
+                <span>{tab.label}</span>
+              </TabsTriggerButton>
+            );
+          })}
+        </TabsList>
+      </TabsHeader>
+    </TabsContainer>
+  );
+};
+
+export default BmCustomTab;

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

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
+import GroupIcon from '@mui/icons-material/Group';
+import BusinessIcon from '@mui/icons-material/Business';
+import BmCustomTab from './BmTabv2';
+
+export const ExampleCustomTabsUsage = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <div style={{ padding: 20 }}>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: 20 }}>
+        <strong>Current Tab:</strong> {activeTab}
+      </div>
+    </div>
+  );
+};
+
+export default {
+  title: 'Components/CustomTabs',
+  component: BmCustomTab,
+};
+
+export const ExampleTabs = () => {
+  const [activeTab, setActiveTab] = useState('departments');
+
+  const tabs = [
+    { value: 'departments', label: 'Departments', icon: BusinessIcon },
+    { value: 'resources', label: 'Resources', icon: GroupIcon },
+    { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
+  ];
+
+  return (
+    <>
+      <BmCustomTab value={activeTab} onValueChange={setActiveTab} tabs={tabs} />
+      <div style={{ marginTop: '20px' }}>
+        <p>
+          You have selected: <strong>{activeTab}</strong>
+        </p>
+      </div>
+    </>
+  );
+};

package/src/lib/components/HorizontalCard/HorizontalCard.js

@@ -0,0 +1,258 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import AccessTimeIcon from '@mui/icons-material/AccessTime';
+import AttachMoneyIcon from '@mui/icons-material/AttachMoney';
+import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined';
+import LinkIcon from '@mui/icons-material/Link';
+import EditIcon from '@mui/icons-material/Edit';
+import DeleteIcon from '@mui/icons-material/Delete';
+import Groups2OutlinedIcon from '@mui/icons-material/Groups2Outlined';
+import PeopleAltOutlinedIcon from '@mui/icons-material/PeopleAltOutlined';
+
+const RowContainer = styled.div`
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  transition: all 0.2s;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  cursor: pointer;
+  gap: 12px;
+
+  &:hover {
+    border-color: rgba(0, 0, 0, 0.2);
+  }
+
+  ${({ isActive }) =>
+    !isActive &&
+    css`
+      opacity: 0.7;
+    `}
+
+  @media (max-width: 600px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`;
+
+const ColorBar = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+  background-color: ${(props) => props.color || '#ccc'};
+`;
+
+const InfoContainer = styled.div`
+  flex: 1;
+  padding-left: 12px;
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+const Name = styled.h3`
+  margin: 0;
+  font-weight: 500;
+`;
+
+const Badge = styled.span`
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 6px;
+  font-size: 12px;
+  border-radius: 4px;
+  ${({ variant }) =>
+    variant === 'outline'
+      ? css`
+          border: 1px solid #d1d5db;
+          color: #4b5563;
+          background-color: rgba(0, 0, 0, 0.04);
+        `
+      : css`
+          background-color: #e6f4ea;
+          color: #166534;
+          border: none;
+        `}
+`;
+
+const Description = styled.p`
+  margin-top: 4px;
+  font-size: 0.9rem;
+  color: #6b7280;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const MetaRow = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-top: 12px;
+`;
+
+const MetaItem = styled.div`
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  color: #374151;
+
+  svg {
+    margin-right: 4px;
+    width: 18px;
+    height: 18px;
+  }
+`;
+
+const ActionButtons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  ${RowContainer}:hover & {
+    opacity: 1;
+  }
+`;
+
+const IconButton = styled.button`
+  background: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: ${({ iconColor }) => iconColor || '#111827'};
+  transition: color 0.2s;
+
+  &:hover {
+    color: #111827;
+  }
+
+  &.danger:hover {
+    color: #dc2626;
+  }
+
+  @media (max-width: 600px) {
+    padding: 2px;
+  }
+`;
+
+const BmHorizontalCard = ({
+  onView,
+  onDelete,
+  onCopyLink,
+  name,
+  description,
+  price,
+  color,
+  isActive,
+  location,
+  paymentSettings,
+  selectedResources,
+  address,
+  duration,
+  guest_limit,
+}) => {
+  return (
+    <RowContainer isActive={isActive}>
+      <ColorBar color={color} />
+
+      <InfoContainer>
+        <TitleRow>
+          <Name>{name}</Name>
+
+          {!isActive && <Badge variant="outline">Inactive</Badge>}
+
+          {paymentSettings?.requirePayment && (
+            <Badge>
+              <AttachMoneyIcon fontSize="small" />
+              Payment Required
+            </Badge>
+          )}
+        </TitleRow>
+
+        <Description>{description}</Description>
+
+        <MetaRow>
+          <MetaItem>
+            <AccessTimeIcon fontSize="small" />
+            <span>{duration} mins</span>
+          </MetaItem>
+          <MetaItem>
+            <AttachMoneyIcon fontSize="small" />
+            <span>{price === 0 ? 'Free' : `$${price}`}</span>
+          </MetaItem>
+          <MetaItem>
+            <LocationOnOutlinedIcon fontSize="small" />
+            <span>
+              {location}
+              {location === 'physical' && address
+                ? ` (${address.split(',')[0]}...)`
+                : ''}
+            </span>
+          </MetaItem>
+          {guest_limit && (
+            <MetaItem>
+              <Groups2OutlinedIcon fontSize="small" />
+              <span>
+                Max {guest_limit} attendee{guest_limit > 1 ? 's' : ''}
+              </span>
+            </MetaItem>
+          )}
+          {selectedResources && selectedResources.length > 0 && (
+            <MetaItem>
+              <PeopleAltOutlinedIcon fontSize="small" />
+              <span>
+                {selectedResources.length} resource
+                {selectedResources.length > 1 ? 's' : ''}
+              </span>
+            </MetaItem>
+          )}
+        </MetaRow>
+      </InfoContainer>
+
+      <ActionButtons>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onCopyLink();
+          }}
+          title="Copy shareable link"
+        >
+          <LinkIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          onClick={(e) => {
+            e.stopPropagation();
+            onView();
+          }}
+          title="Edit appointment type"
+        >
+          <EditIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          iconColor="#dc2626"
+          className="danger"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete();
+          }}
+          title="Delete appointment type"
+        >
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+      </ActionButtons>
+    </RowContainer>
+  );
+};
+
+export default BmHorizontalCard;

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import BmHorizontalCard from './HorizontalCard';
+
+export default {
+  title: 'Components/BmHorizontalCard',
+  component: BmHorizontalCard,
+  tags: ['autodocs'],
+};
+
+const sampleResources = [{ id: 1 }, { id: 2 }];
+
+export const Example = () => (
+  <BmHorizontalCard
+    onView={action('View clicked')}
+    onDelete={action('Delete clicked')}
+    onCopyLink={action('Copy link clicked')}
+    name="Strategy Session"
+    description="Deep dive on your business strategy and next steps."
+    price={150}
+    color="#10b981"
+    isActive
+    location="physical"
+    paymentSettings={{ requirePayment: true }}
+    selectedResources={sampleResources}
+    address="456 Innovation Avenue, Tech City"
+    duration={60}
+    guest_limit={10}
+  />
+);

package/src/lib/components/index.js

@@ -86,6 +86,9 @@ import BmAlertBox from './Alert/Alert';
 import BmDepartmentCard from './DepartmentCard/DepartmentCard';
 import BmResourceCard from './ResourceCard/ResourceCard';
 
+import BmCustomTab from './BmTabv2/BmTabv2';
+import BmHorizontalCard from './HorizontalCard/HorizontalCard';
+
 export {
   BmAccordion,
   BmAvatar,
@@ -167,4 +170,6 @@ export {
   BmAlertBox,
   BmDepartmentCard,
   BmResourceCard,
+  BmCustomTab,
+  BmHorizontalCard,
 };

package/dist/components/BmTabv2/BmTabV2..js

@@ -1,72 +0,0 @@
-"use strict";
-'use client';
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TabPanel = TabPanel;
-exports.Tabs = Tabs;
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-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); }
-// Utility
-const cn = function () {
-  for (var _len = arguments.length, classes = new Array(_len), _key = 0; _key < _len; _key++) {
-    classes[_key] = arguments[_key];
-  }
-  return classes.filter(Boolean).join(' ');
-};
-
-// Styled components
-
-const TabsContainer = _styledComponents.default.div.withConfig({
-  displayName: "BmTabV2__TabsContainer"
-})(["display:flex;flex-direction:column;gap:0.5rem;@media (max-width:640px){gap:0.25rem;}"]);
-const TabsList = _styledComponents.default.div.withConfig({
-  displayName: "BmTabV2__TabsList"
-})(["display:flex;flex-wrap:nowrap;background:#f5f5f5;overflow-x:auto;padding:3px;border-radius:8px;&::-webkit-scrollbar{display:none;}"]);
-const TabButton = _styledComponents.default.button.withConfig({
-  displayName: "BmTabV2__TabButton"
-})(["flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0.5rem 0.75rem;font-size:0.875rem;font-weight:500;white-space:nowrap;border:1px solid transparent;border-radius:8px;background:transparent;color:#333;cursor:pointer;transition:all 0.2s;", " &:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;}&:disabled{pointer-events:none;opacity:0.5;}svg{flex-shrink:0;pointer-events:none;width:1rem;height:1rem;}"], _ref => {
-  let {
-    active
-  } = _ref;
-  return active && (0, _styledComponents.css)(["background:#ffffff;color:#111111;border-color:#ddd;"]);
-});
-const TabContent = _styledComponents.default.div.withConfig({
-  displayName: "BmTabV2__TabContent"
-})(["flex:1;padding:0.5rem 0;"]);
-
-// Main Tabs component
-
-// eslint-disable-next-line func-style
-function Tabs(_ref2) {
-  let {
-    defaultValue = 0,
-    children,
-    className
-  } = _ref2;
-  const [activeIndex, setActiveIndex] = (0, _react.useState)(defaultValue);
-
-  // Get all children that are type of TabPanel (so we can match titles & content)
-  const tabPanels = _react.default.Children.toArray(children).filter(child => child.type.displayName === 'TabPanel');
-  return /*#__PURE__*/_react.default.createElement(TabsContainer, {
-    className: cn(className)
-  }, /*#__PURE__*/_react.default.createElement(TabsList, null, tabPanels.map((panel, index) => /*#__PURE__*/_react.default.createElement(TabButton
-  // eslint-disable-next-line react/no-array-index-key
-  , {
-    key: index,
-    active: activeIndex === index,
-    onClick: () => setActiveIndex(index)
-  }, panel.props.title))), /*#__PURE__*/_react.default.createElement(TabContent, null, tabPanels[activeIndex] && tabPanels[activeIndex].props.children));
-}
-
-// Individual Tab panel component
-// eslint-disable-next-line func-style
-function TabPanel(_ref3) {
-  let {
-    children
-  } = _ref3;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
-}
-TabPanel.displayName = 'TabPanel';

package/src/lib/components/BmTabv2/BmTabV2..js

@@ -1,122 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import styled, { css } from 'styled-components';
-
-// Utility
-const cn = (...classes) => classes.filter(Boolean).join(' ');
-
-// Styled components
-
-const TabsContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-
-  @media (max-width: 640px) {
-    gap: 0.25rem;
-  }
-`;
-
-const TabsList = styled.div`
-  display: flex;
-  flex-wrap: nowrap;
-  background: #f5f5f5;
-  overflow-x: auto;
-  padding: 3px;
-  border-radius: 8px;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-`;
-
-const TabButton = styled.button`
-  flex: 1 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  padding: 0.5rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: #333;
-  cursor: pointer;
-  transition: all 0.2s;
-
-  ${({ active }) =>
-    active &&
-    css`
-      background: #ffffff;
-      color: #111111;
-      border-color: #ddd;
-    `}
-
-  &:focus-visible {
-    outline: 2px solid #3b82f6;
-    outline-offset: 2px;
-  }
-
-  &:disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  svg {
-    flex-shrink: 0;
-    pointer-events: none;
-    width: 1rem;
-    height: 1rem;
-  }
-`;
-
-const TabContent = styled.div`
-  flex: 1;
-  padding: 0.5rem 0;
-`;
-
-// Main Tabs component
-
-// eslint-disable-next-line func-style
-function Tabs({ defaultValue = 0, children, className }) {
-  const [activeIndex, setActiveIndex] = useState(defaultValue);
-
-  // Get all children that are type of TabPanel (so we can match titles & content)
-  const tabPanels = React.Children.toArray(children).filter(
-    (child) => child.type.displayName === 'TabPanel'
-  );
-
-  return (
-    <TabsContainer className={cn(className)}>
-      <TabsList>
-        {tabPanels.map((panel, index) => (
-          <TabButton
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            active={activeIndex === index}
-            onClick={() => setActiveIndex(index)}
-          >
-            {panel.props.title}
-          </TabButton>
-        ))}
-      </TabsList>
-      <TabContent>
-        {tabPanels[activeIndex] && tabPanels[activeIndex].props.children}
-      </TabContent>
-    </TabsContainer>
-  );
-}
-
-// Individual Tab panel component
-// eslint-disable-next-line func-style
-function TabPanel({ children }) {
-  return <>{children}</>;
-}
-
-TabPanel.displayName = 'TabPanel';
-
-export { Tabs, TabPanel };