beem-component 2.1.29 → 2.1.30

package/Dockerfile

@@ -24,7 +24,7 @@ COPY --from=build /app/storybook-static /usr/share/nginx/html
 RUN rm /etc/nginx/conf.d/default.conf
 
 # Replace the default NGINX config with your custom one
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY nginx.conf /etc/nginx/conf.d/
 
 
 EXPOSE 3000

package/Jenkinsfile

@@ -1,33 +1,43 @@
 pipeline{
     agent any
+    parameters {
+        string(name: 'TAG', description: 'Tag Number Ex: v2.0.0')
+    }
     tools {nodejs "nodejs"}
     environment
     {
-        VERSION = "v1.0.${BUILD_NUMBER}"
+	    VERSION = "${params.TAG != "" ? params.TAG : "v2.0.${BUILD_NUMBER}"}"
         PROJECT = "bm-components"
         IMAGE = "$PROJECT:$VERSION"
         ECRURL = "https://347944191864.dkr.ecr.eu-west-1.amazonaws.com"
         ECRCRED = "ecr:eu-west-1:awscred"
-    }
+        GIT_CREDS = "master-user-dev"
+        GIT_URL = "git@bitbucket.org:bongolive/${PROJECT}.git"
 
+    }
     stages{
         stage('Deploy for development') {
             when {
                 branch 'develop'
             }
             steps {
-                git branch: 'develop',credentialsId: 'bitbucket',url: "https://bitbucket.org/bongolive/${PROJECT}.git"
+                git branch: 'develop',credentialsId: "${GIT_CREDS}",url: "${GIT_URL}"
             }
         }
         stage('Deploy for production') {
             when {
                 branch 'master'
             }
-            steps {
-                git branch: 'master',credentialsId: 'bitbucket',url: "https://bitbucket.org/bongolive/${PROJECT}.git"
+           steps {
+                git branch: 'master',credentialsId: "${GIT_CREDS}",url: "${GIT_URL}"
             }
         }
         stage('Image build') {
+            when {
+                expression {
+                    return params.TAG == ''
+                }
+            }
             steps{
                 script
                 {
@@ -36,6 +46,11 @@ pipeline{
             }
         }
         stage('Image push') {
+            when {
+                expression {
+                    return params.TAG == ''
+                }
+            }
             steps {
                 script
                 {

package/dist/assets/voiceCallIcon.svg

@@ -0,0 +1,5 @@
+<svg width="418" height="418" viewBox="0 0 418 418" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="209" cy="209" r="209" fill="#33B1BA"/>
+<path d="M128.728 105.326L100.728 122.826C92.4077 128.026 91.4251 141.826 92.2276 152.826C100.728 269.326 177.228 310.326 194.728 323.326C208.728 333.726 221.561 331.326 226.228 328.826L252.728 312.326C265.528 302.726 263.061 286.993 260.228 280.326L244.728 255.326C231.528 237.326 211.561 245.493 203.228 251.826C193.228 258.326 192.228 255.326 186.728 251.826C168.328 235.026 155.394 206.159 151.228 193.826C147.628 187.026 152.728 181.993 155.728 180.326L169.728 170.826C178.928 163.226 179.228 149.326 176.228 141.826C171.894 134.326 161.387 117.426 154.024 109.826C146.661 102.226 134.092 103.659 128.728 105.326Z" fill="white"/>
+<path d="M220 156C236.5 158.5 259.5 170.5 256.5 206M225 121.5C281 132.5 295.5 180.5 290.5 211M230.5 88C300.5 97 333 164.5 324.5 216.5" stroke="white" stroke-width="16" stroke-linecap="round"/>
+</svg>

package/dist/components/Alert/Alert.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const hexToRgba = function (hex) {
+  let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0.6;
+  try {
+    const normalizedHex = hex === null || hex === void 0 ? void 0 : hex.replace('#', '');
+    if (!normalizedHex || normalizedHex.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(normalizedHex)) {
+      throw new Error('Invalid hex');
+    }
+    const r = parseInt(normalizedHex.slice(0, 2), 16);
+    const g = parseInt(normalizedHex.slice(2, 4), 16);
+    const b = parseInt(normalizedHex.slice(4, 6), 16);
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+  } catch (e) {
+    return "rgba(0, 0, 0, ".concat(opacity, ")");
+  }
+};
+const AlertWrapper = _styledComponents.default.div.withConfig({
+  displayName: "Alert__AlertWrapper"
+})(["border:1px solid ", ";background-color:", ";border-radius:0.5rem;padding:0.75rem;@media (min-width:640px){padding:1rem;}"], _ref => {
+  let {
+    themeColor
+  } = _ref;
+  return hexToRgba(themeColor, 0.2);
+}, _ref2 => {
+  let {
+    themeColor
+  } = _ref2;
+  return hexToRgba(themeColor, 0.05);
+});
+const Content = _styledComponents.default.div.withConfig({
+  displayName: "Alert__Content"
+})(["display:flex;align-items:flex-start;gap:0.75rem;"]);
+const IconContainer = _styledComponents.default.div.withConfig({
+  displayName: "Alert__IconContainer"
+})(["background-color:", ";border-radius:9999px;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;margin-top:0.125rem;@media (min-width:640px){width:2.1rem;height:2.1rem;}svg{width:1rem;height:1rem;color:", ";@media (min-width:640px){width:1.25rem;height:1.25rem;}}"], _ref3 => {
+  let {
+    themeColor
+  } = _ref3;
+  return hexToRgba(themeColor, 0.1);
+}, _ref4 => {
+  let {
+    themeColor
+  } = _ref4;
+  return themeColor;
+});
+const TextContent = _styledComponents.default.div.withConfig({
+  displayName: "Alert__TextContent"
+})(["flex:1;"]);
+const Title = _styledComponents.default.h3.withConfig({
+  displayName: "Alert__Title"
+})(["font-weight:500;color:", ";font-size:0.875rem;margin-bottom:0.25rem;"], _ref5 => {
+  let {
+    themeColor
+  } = _ref5;
+  return themeColor;
+});
+const Description = _styledComponents.default.p.withConfig({
+  displayName: "Alert__Description"
+})(["color:#6b7280;font-size:0.75rem;@media (min-width:640px){font-size:0.875rem;}"]);
+const BmAlertBox = _ref6 => {
+  let {
+    icon: Icon,
+    themeColor = '#EF4444',
+    title,
+    description
+  } = _ref6;
+  return /*#__PURE__*/_react.default.createElement(AlertWrapper, {
+    themeColor: themeColor
+  }, /*#__PURE__*/_react.default.createElement(Content, null, Icon && /*#__PURE__*/_react.default.createElement(IconContainer, {
+    themeColor: themeColor
+  }, /*#__PURE__*/_react.default.createElement(Icon, null)), /*#__PURE__*/_react.default.createElement(TextContent, null, /*#__PURE__*/_react.default.createElement(Title, {
+    themeColor: themeColor
+  }, title), /*#__PURE__*/_react.default.createElement(Description, null, description))));
+};
+var _default = exports.default = BmAlertBox;

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

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

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

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

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
+var _Check = _interopRequireDefault(require("@mui/icons-material/Check"));
+var _AccessTime = _interopRequireDefault(require("@mui/icons-material/AccessTime"));
+var _Favorite = _interopRequireDefault(require("@mui/icons-material/Favorite"));
+var _CustomCardTitle = _interopRequireDefault(require("./CustomCardTitle"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// MUI icons
+
+// Icon options mapped by name
+const iconOptions = {
+  Calendar: _CalendarTodayOutlined.default,
+  Check: _Check.default,
+  Clock: _AccessTime.default,
+  Heart: _Favorite.default
+};
+const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
+const Template = args => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: 500,
+      margin: '2rem auto'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomCardTitle.default, args));
+};
+const Default = exports.Default = Template.bind({});
+Default.args = {
+  icon: _CalendarTodayOutlined.default,
+  themeColor: '#33B1BA',
+  title: 'Book Your Medical Appointment',
+  description: 'Schedule a 30-minute consultation with our healthcare specialists',
+  variant: 'booking',
+  withStripe: true,
+  imageSrc: imgs
+};
+Default.argTypes = {
+  icon: {
+    control: {
+      type: 'select',
+      labels: Object.keys(iconOptions)
+    },
+    options: Object.keys(iconOptions),
+    mapping: iconOptions
+  },
+  themeColor: {
+    control: 'color'
+  },
+  title: {
+    control: 'text'
+  },
+  description: {
+    control: 'text'
+  },
+  variant: {
+    control: {
+      type: 'radio'
+    },
+    options: ['booking', 'confirmation']
+  },
+  withStripe: {
+    control: {
+      type: 'boolean'
+    }
+  },
+  imageSrc: {
+    control: 'text',
+    description: 'URL of the image to display in the card'
+  }
+};
+var _default = exports.default = {
+  title: 'Components/BmCustomCardTitle',
+  component: _CustomCardTitle.default,
+  argTypes: Default.argTypes
+};
+const Example = () => {
+  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,
+    imageSrc: imgs
+  });
+};
+exports.Example = Example;

package/dist/components/BmSelector/BmSelector.js

@@ -89,10 +89,23 @@ const BmSelector = _ref8 => {
     themeColor,
     textColor,
     fontWeight,
-    name = 'selection'
+    name = 'selection',
+    useFormik = false
   } = _ref8;
   return /*#__PURE__*/_react.default.createElement(RadioGroupWrapper, null, data.map(item => {
     const isSelected = selectedDataId === item.id;
+    const handleChange = () => {
+      if (useFormik) {
+        onChange({
+          target: {
+            name,
+            value: item.id
+          }
+        });
+      } else {
+        onChange(item.id);
+      }
+    };
     return /*#__PURE__*/_react.default.createElement("label", {
       key: item.id,
       htmlFor: item.id
@@ -101,7 +114,7 @@ const BmSelector = _ref8 => {
       name: name,
       value: item.id,
       checked: isSelected,
-      onChange: () => onChange(item.id)
+      onChange: handleChange
     }), /*#__PURE__*/_react.default.createElement(TimeSlotCard, {
       selected: isSelected,
       themeColor: themeColor

package/dist/components/BmSelector/BmSelector.stories.js

@@ -56,6 +56,12 @@ var _default = exports.default = {
           endDate: '09:30 AM'
         }
       }]
+    },
+    useFormik: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
     }
   }
 };
@@ -102,6 +108,7 @@ Default.args = {
       endDate: '09:30 AM'
     }
   }],
+  useFormik: false,
   themeColor: '#33B1BA',
   textColor: '#33B1BA',
   fontWeight: '',
@@ -124,15 +131,21 @@ const Example = () => {
       endDate: '11:10 AM'
     }
   }];
+
+  // When you use useFormik as true then you need to pass handleChange func and the name [name="time"].
+  // so that is works accordingly
+
   const [selectedDataId, setSelectedDataId] = (0, _react.useState)(null);
   return /*#__PURE__*/_react.default.createElement(_BmSelector.default, {
+    name: "time",
     data: slots,
     selectedDataId: selectedDataId,
     onChange: setSelectedDataId,
     icon: _AccessTime.default,
     themeColor: "#33B1BA",
     textColor: "#33B1BA",
-    fontWeight: "600"
+    fontWeight: "600",
+    useFormik: "false"
   });
 };
 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"
+})(["width:100%;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;