beem-component 2.1.8 → 2.1.29

package/dist/components/Alert/Alert.js

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

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

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

package/dist/components/BmCustomCardTitle/CustomCardTitle.js

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

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

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

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

@@ -1,111 +0,0 @@
-import React from 'react';
-import styled from 'styled-components';
-
-const hexToRgba = (hex, opacity = 0.6) => {
-  try {
-    const normalizedHex = hex?.replace('#', '');
-    if (
-      !normalizedHex ||
-      normalizedHex.length !== 6 ||
-      !/^[0-9a-fA-F]{6}$/.test(normalizedHex)
-    ) {
-      throw new Error('Invalid hex');
-    }
-
-    const r = parseInt(normalizedHex.slice(0, 2), 16);
-    const g = parseInt(normalizedHex.slice(2, 4), 16);
-    const b = parseInt(normalizedHex.slice(4, 6), 16);
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-  } catch (e) {
-    return `rgba(0, 0, 0, ${opacity})`;
-  }
-};
-
-const AlertWrapper = styled.div`
-  border: 1px solid ${({ themeColor }) => hexToRgba(themeColor, 0.2)};
-  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.05)};
-  border-radius: 0.5rem;
-  padding: 0.75rem;
-
-  @media (min-width: 640px) {
-    padding: 1rem;
-  }
-`;
-
-const Content = styled.div`
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-`;
-
-const IconContainer = styled.div`
-  background-color: ${({ themeColor }) => hexToRgba(themeColor, 0.1)};
-  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: ${({ themeColor }) => themeColor};
-
-    @media (min-width: 640px) {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-`;
-
-const TextContent = styled.div`
-  flex: 1;
-`;
-
-const Title = styled.h3`
-  font-weight: 500;
-  color: ${({ themeColor }) => themeColor};
-  font-size: 0.875rem;
-  margin-bottom: 0.25rem;
-`;
-
-const Description = styled.p`
-  color: #6b7280;
-  font-size: 0.75rem;
-
-  @media (min-width: 640px) {
-    font-size: 0.875rem;
-  }
-`;
-
-const BmAlertBox = ({
-  icon: Icon,
-  themeColor = '#EF4444',
-  title,
-  description,
-}) => {
-  return (
-    <AlertWrapper themeColor={themeColor}>
-      <Content>
-        {Icon && (
-          <IconContainer themeColor={themeColor}>
-            <Icon />
-          </IconContainer>
-        )}
-        <TextContent>
-          <Title themeColor={themeColor}>{title}</Title>
-          <Description>{description}</Description>
-        </TextContent>
-      </Content>
-    </AlertWrapper>
-  );
-};
-
-export default BmAlertBox;

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

@@ -1,66 +0,0 @@
-import React from 'react';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import PersonIcon from '@mui/icons-material/Person';
-import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
-import BmAlertBox from './Alert';
-
-const iconOptions = {
-  AccessTimeIcon,
-  PersonIcon,
-  CalendarTodayOutlinedIcon,
-  None: null,
-};
-
-const Template = (args) => {
-  return (
-    <div style={{ maxWidth: 500, margin: '2rem auto' }}>
-      <BmAlertBox {...args} />
-    </div>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  icon: AccessTimeIcon,
-  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',
-  },
-};
-
-export default {
-  title: 'Components/BmAlertBox',
-  component: BmAlertBox,
-  argTypes: Default.argTypes,
-};
-
-export const Example = () => {
-  return (
-    <BmAlertBox
-      icon={AccessTimeIcon}
-      themeColor="#DC2626"
-      title="Payment Error"
-      description="We couldn't process your payment. Please try again later or contact support."
-    />
-  );
-};