@capillarytech/blaze-ui 0.1.6-alpha.3 → 0.1.6-alpha.32

package/dist/esm/components/CapTestSelect/index.js

@@ -0,0 +1 @@
+export { default } from './CapTestSelect';

package/dist/esm/components/CapUnifiedSelect/CapUnifiedSelect.js

@@ -0,0 +1,398 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+// Enhanced CapUnifiedSelect supporting 4 scenarios with advanced features
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Select, TreeSelect, Tooltip, Input, Button } from 'antd';
+import styled from 'styled-components';
+import { InfoCircleOutlined, SearchOutlined, WarningFilled, DownOutlined } from '@ant-design/icons';
+import withStyles from '../utils/withStyles'; // Updated import path
+import { SelectWrapper, HeaderWrapper, selectStyles } from './styles';
+var CapUnifiedSelect = function CapUnifiedSelect(_ref) {
+  var type = _ref.type,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    treeData = _ref.treeData,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    _ref$placeholder = _ref.placeholder,
+    placeholder = _ref$placeholder === void 0 ? 'Select an option' : _ref$placeholder,
+    className = _ref.className,
+    style = _ref.style,
+    status = _ref.status,
+    statusMessage = _ref.statusMessage,
+    _ref$allowClear = _ref.allowClear,
+    allowClear = _ref$allowClear === void 0 ? false : _ref$allowClear,
+    label = _ref.label,
+    tooltip = _ref.tooltip,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$treeCheckable = _ref.treeCheckable,
+    treeCheckable = _ref$treeCheckable === void 0 ? false : _ref$treeCheckable,
+    _ref$customPopupRende = _ref.customPopupRender,
+    customPopupRender = _ref$customPopupRende === void 0 ? false : _ref$customPopupRende,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel;
+  var StyledSelect = styled(Select).withConfig({
+    displayName: "StyledSelect",
+    componentId: "sc-wsphu8-0"
+  })(["", ""], selectStyles);
+  var StyledTreeSelect = styled(TreeSelect).withConfig({
+    displayName: "StyledTreeSelect",
+    componentId: "sc-wsphu8-1"
+  })(["", ""], selectStyles);
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchText = _useState2[0],
+    setSearchText = _useState2[1];
+  var _useState3 = useState(value),
+    _useState4 = _slicedToArray(_useState3, 2),
+    tempValue = _useState4[0],
+    setTempValue = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    allSelected = _useState6[0],
+    setAllSelected = _useState6[1];
+
+  // Update tempValue when value changes
+  useEffect(function () {
+    setTempValue(value);
+  }, [value]);
+  var selectVirtualizationProps = {
+    listHeight: 256
+  };
+  var treeSelectVirtualizationProps = {
+    listHeight: 256,
+    listItemHeight: 32
+  };
+
+  // No results component
+  var NoResult = function NoResult() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        height: 200,
+        color: '#8c8c8c',
+        fontSize: 14
+      }
+    }, /*#__PURE__*/React.createElement(WarningFilled, {
+      style: {
+        fontSize: 36,
+        marginBottom: 8,
+        color: '#bfbfbf'
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontWeight: 500
+      }
+    }, "No results found"));
+  };
+
+  // Filter tree data based on search text
+  var getFilteredTreeData = function getFilteredTreeData(data, search) {
+    if (!search) return data;
+    var filterNode = function filterNode(node) {
+      var _node$title, _node$label;
+      var titleText = ((_node$title = node.title) === null || _node$title === void 0 ? void 0 : _node$title.toLowerCase()) || '';
+      var labelText = ((_node$label = node.label) === null || _node$label === void 0 ? void 0 : _node$label.toLowerCase()) || '';
+      return titleText.includes(search.toLowerCase()) || labelText.includes(search.toLowerCase());
+    };
+    var _loop = function loop(data) {
+      return data.map(function (item) {
+        var children = item.children ? _loop(item.children) : [];
+        if (filterNode(item) || children.length) {
+          return _objectSpread(_objectSpread({}, item), {}, {
+            children: children
+          });
+        }
+        return null;
+      }).filter(Boolean);
+    };
+    return _loop(data);
+  };
+
+  // Get all leaf node values from tree data
+  var _flattenedLeafValues = function flattenedLeafValues(nodes) {
+    return (nodes === null || nodes === void 0 ? void 0 : nodes.flatMap(function (node) {
+      return node.children ? _flattenedLeafValues(node.children) : [node.value];
+    })) || [];
+  };
+  var filteredTree = getFilteredTreeData(treeData || options, searchText);
+  var filteredOptions = !searchText ? options : options.filter(function (opt) {
+    var _opt$label;
+    return (_opt$label = opt.label) === null || _opt$label === void 0 ? void 0 : _opt$label.toLowerCase().includes(searchText.toLowerCase());
+  });
+
+  // All available leaf values for the current filtered tree data
+  var leafValues = _flattenedLeafValues(filteredTree);
+
+  // Handles select all checkbox click
+  var handleSelectAll = function handleSelectAll() {
+    var isTree = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var availableValues = isTree ? leafValues : filteredOptions.map(function (opt) {
+      return opt.value;
+    });
+    if (allSelected) {
+      setTempValue([]);
+    } else {
+      setTempValue(availableValues);
+    }
+    setAllSelected(!allSelected);
+  };
+
+  // Update allSelected state when value changes
+  useEffect(function () {
+    var isMultipleMode = type === 'multiSelect' || type === 'multiTreeSelect';
+    if (isMultipleMode && Array.isArray(tempValue)) {
+      var availableValues = type.includes('tree') ? leafValues : filteredOptions.map(function (opt) {
+        return opt.value;
+      });
+      setAllSelected(tempValue.length > 0 && tempValue.length === availableValues.length);
+    }
+  }, [tempValue, filteredOptions, leafValues, type]);
+
+  // Handle confirmation
+  var handleConfirm = function handleConfirm() {
+    if (onConfirm) {
+      onConfirm(tempValue);
+    } else {
+      onChange(tempValue);
+    }
+    setSearchText('');
+  };
+
+  // Handle cancellation
+  var handleCancel = function handleCancel() {
+    if (onCancel) {
+      onCancel();
+    }
+    setTempValue(value);
+    setSearchText('');
+  };
+
+  // Handle temporary value change
+  var handleTempChange = function handleTempChange(newValue) {
+    setTempValue(newValue);
+  };
+  var suffix = (type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "+", value.length - 1, " more", /*#__PURE__*/React.createElement(DownOutlined, null))) : /*#__PURE__*/React.createElement(DownOutlined, null);
+  var prefix = function prefix() {
+    if ((type === "multiTreeSelect" || type === "multiSelect") && Array.isArray(value) && value.length > 0) {
+      var selectedLabels = options.filter(function (opt) {
+        return value.includes(opt.value);
+      }).map(function (opt) {
+        return opt.label;
+      });
+      return selectedLabels[0];
+    } else {
+      return null;
+    }
+  };
+  var renderHeader = function renderHeader() {
+    if (!label && !tooltip) return null;
+    return /*#__PURE__*/React.createElement(HeaderWrapper, {
+      className: disabled ? 'disabled' : ''
+    }, label && /*#__PURE__*/React.createElement("label", {
+      type: "label16",
+      className: disabled ? 'disabled' : ''
+    }, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+      title: tooltip
+    }, /*#__PURE__*/React.createElement(InfoCircleOutlined, {
+      className: disabled ? 'disabled' : '',
+      style: {
+        color: '#B3BAC5'
+      }
+    })));
+  };
+  var renderDropdown = function renderDropdown() {
+    var isMultipleSelect = type === 'multiSelect' || type === 'multiTreeSelect';
+    var isTreeMode = type === 'treeSelect' || type === 'multiTreeSelect';
+    var currentItems = isTreeMode ? filteredTree : filteredOptions;
+    var selectedCount = Array.isArray(tempValue) ? tempValue.length : tempValue ? 1 : 0;
+
+    // Custom dropdown render for both Select and TreeSelect
+    var renderCustomDropdown = function renderCustomDropdown(menu) {
+      if (!customPopupRender) return menu;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        style: {
+          borderBottom: '1px solid #f0f0f0'
+        }
+      }, /*#__PURE__*/React.createElement(Input, {
+        prefix: /*#__PURE__*/React.createElement(SearchOutlined, {
+          style: {
+            color: "#B3BAC5"
+          }
+        }),
+        placeholder: "Search",
+        variant: "borderless",
+        value: searchText,
+        onChange: function onChange(e) {
+          return setSearchText(e.target.value);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return e.stopPropagation();
+        }
+      })), isMultipleSelect && currentItems.length > 0 && /*#__PURE__*/React.createElement("div", {
+        style: {
+          padding: '8px 12px',
+          cursor: 'pointer',
+          display: 'flex',
+          alignItems: 'center',
+          borderBottom: '1px solid #f0f0f0'
+        },
+        onClick: function onClick(e) {
+          // Prevent event propagation to keep dropdown open
+          e.stopPropagation();
+          handleSelectAll(isTreeMode);
+        }
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "checkbox",
+        checked: allSelected,
+        readOnly: true,
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: function onClick(e) {
+          return e.stopPropagation();
+        }
+      }), /*#__PURE__*/React.createElement("label", {
+        style: {
+          marginLeft: 8,
+          cursor: 'pointer'
+        }
+      }, "Select all")), currentItems.length === 0 ? /*#__PURE__*/React.createElement(NoResult, null) : menu, currentItems.length > 0 && isMultipleSelect && /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          padding: '8px 12px',
+          borderTop: '1px solid #f0f0f0'
+        }
+      }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+        type: "primary",
+        size: "small",
+        style: {
+          marginRight: 8
+        },
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          handleConfirm();
+        }
+      }, "Confirm"), /*#__PURE__*/React.createElement(Button, {
+        type: "text",
+        size: "small",
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          handleCancel();
+        }
+      }, "Cancel")), selectedCount > 0 && /*#__PURE__*/React.createElement("span", {
+        style: {
+          color: '#8c8c8c',
+          fontSize: '14px'
+        }
+      }, selectedCount, " selected")));
+    };
+    if (type === 'treeSelect' || type === 'multiTreeSelect') {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTreeSelect, _extends({
+        treeData: filteredTree,
+        value: customPopupRender ? tempValue : value,
+        onChange: customPopupRender ? handleTempChange : onChange,
+        placeholder: placeholder,
+        maxTagCount: 0,
+        maxTagPlaceholder: function maxTagPlaceholder() {
+          return null;
+        },
+        prefix: type === "multiTreeSelect" && value.length > 0 && prefix(),
+        suffixIcon: suffix,
+        className: classnames("cap-unified-tree-select ".concat(className || '')),
+        style: style,
+        status: status,
+        allowClear: allowClear,
+        showSearch: false,
+        multiple: type === 'multiTreeSelect',
+        treeCheckable: treeCheckable,
+        showCheckedStrategy: TreeSelect.SHOW_PARENT,
+        virtual: true,
+        disabled: disabled,
+        filterTreeNode: false
+      }, treeSelectVirtualizationProps, {
+        popupRender: renderCustomDropdown
+      })), status === 'error' && /*#__PURE__*/React.createElement("div", {
+        style: {
+          color: '#E83135'
+        },
+        className: "cap-unified-select-status"
+      }, statusMessage));
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledSelect, _extends({
+      options: filteredOptions,
+      value: customPopupRender ? tempValue : value,
+      onChange: customPopupRender ? handleTempChange : onChange,
+      placeholder: placeholder,
+      maxTagCount: 0,
+      maxTagPlaceholder: function maxTagPlaceholder() {
+        return null;
+      },
+      prefix: type === "multiSelect" && value.length > 0 && prefix(),
+      suffixIcon: suffix,
+      className: classnames('cap-unified-select', className),
+      style: style,
+      allowClear: allowClear,
+      showSearch: false,
+      mode: type === 'multiSelect' ? 'multiple' : undefined,
+      virtual: true,
+      disabled: disabled,
+      status: status
+    }, selectVirtualizationProps, {
+      popupRender: renderCustomDropdown
+    })), status === 'error' && /*#__PURE__*/React.createElement("div", {
+      style: {
+        color: '#E83135'
+      },
+      className: "cap-unified-select-status"
+    }, statusMessage));
+  };
+  return /*#__PURE__*/React.createElement(SelectWrapper, {
+    className: classnames("cap-unified-select-container ".concat(className || ''))
+  }, renderHeader(), renderDropdown());
+};
+CapUnifiedSelect.propTypes = {
+  type: PropTypes.oneOf(['select', 'multiSelect', 'treeSelect', 'multiTreeSelect']),
+  options: PropTypes.array,
+  treeData: PropTypes.array,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+  allowClear: PropTypes.bool,
+  label: PropTypes.string,
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  disabled: PropTypes.bool,
+  treeCheckable: PropTypes.bool,
+  customPopupRender: PropTypes.bool,
+  onConfirm: PropTypes.func,
+  onCancel: PropTypes.func
+};
+CapUnifiedSelect.defaultProps = {
+  type: 'select',
+  allowClear: false,
+  customPopupRender: false,
+  treeCheckable: false,
+  className: ''
+};
+export default withStyles(CapUnifiedSelect, selectStyles);

package/dist/esm/components/CapUnifiedSelect/index.js

@@ -0,0 +1 @@
+export { default } from './CapUnifiedSelect';

package/dist/esm/components/CapUnifiedSelect/styles.js

@@ -0,0 +1,31 @@
+import styled, { css } from 'styled-components';
+import * as styledVars from '../styled/variables';
+export var SelectWrapper = styled.div.withConfig({
+  displayName: "SelectWrapper",
+  componentId: "sc-3v7xpu-0"
+})(["display:flex;flex-direction:column;gap:8px;width:100%;&.disabled{cursor:not-allowed;}"]);
+export var HeaderWrapper = styled.div.withConfig({
+  displayName: "HeaderWrapper",
+  componentId: "sc-3v7xpu-1"
+})(["display:flex;align-items:center;gap:4px;&.disabled{opacity:0.5;cursor:not-allowed;}"]);
+export var DropdownFooter = styled.div.withConfig({
+  displayName: "DropdownFooter",
+  componentId: "sc-3v7xpu-2"
+})(["display:flex;justify-content:space-between;align-items:center;padding:8px;border-top:1px solid #f0f0f0;.footer-buttons{display:flex;align-items:center;gap:8px;}.total-count{color:#8c8c8c;font-size:12px;}"]);
+export var SearchInputWrapper = styled.div.withConfig({
+  displayName: "SearchInputWrapper",
+  componentId: "sc-3v7xpu-3"
+})(["padding:8px;border-bottom:1px solid #f0f0f0;"]);
+export var SelectAllCheckbox = styled.div.withConfig({
+  displayName: "SelectAllCheckbox",
+  componentId: "sc-3v7xpu-4"
+})(["display:flex;align-items:center;padding:8px 12px;cursor:pointer;font-weight:500;border-bottom:1px solid #f0f0f0;user-select:none;input[type=\"checkbox\"]{cursor:pointer;}"]);
+export var NoResultWrapper = styled.div.withConfig({
+  displayName: "NoResultWrapper",
+  componentId: "sc-3v7xpu-5"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#8c8c8c;font-size:14px;"]);
+export var StyledInfoIcon = styled.span.withConfig({
+  displayName: "StyledInfoIcon",
+  componentId: "sc-3v7xpu-6"
+})(["color:", ";font-size:16px;cursor:help;margin-left:4px;display:flex;align-items:center;&:hover{color:", ";}&.disabled{cursor:not-allowed;&:hover{color:", ";}}"], styledVars.CAP_G05, styledVars.CAP_G03, styledVars.CAP_G05);
+export var selectStyles = css(["&.cap-unified-select{width:100%;font-family:", ";}&.cap-unified-select-container{.ant-select-prefix{margin-left:-5px !important;font-size:14px !important;font-weight:400 !important;color:#091E42 !important;line-height:20px !important;}}"], styledVars.FONT_FAMILY);

package/dist/esm/{index.js → components/index.js}

@@ -1,6 +1,7 @@
 // Import and export all components
 export { default as CapInput } from './CapInput';
 export { default as CapTable } from './CapTable';
+export { default as CapTestSelect } from './CapTestSelect'; // Test component for Ant Design v5 integration
 
 // Export utilities
 export { default as LocaleHoc } from './LocaleHoc';
@@ -8,4 +9,7 @@ export { default as LocaleHoc } from './LocaleHoc';
 // Export styled utilities
 import * as _styledVars from './styled/variables';
 export { _styledVars as styledVars };
-export { default as styled } from './styled';
+export { default as styled } from './styled';
+
+// Export utils
+export * from '../utils';

package/dist/esm/utils/index.js

@@ -0,0 +1 @@
+export { default as withStyles } from './withStyles';

package/dist/esm/utils/withStyles.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+/**
+ * Enhances a React component with additional styles using styled-components.
+ * @param {React.ComponentType} WrappedComponent - The React component to enhance.
+ * @param {TemplateStringsArray} styles - CSS styles as a TemplateStringsArray.
+ * @returns {React.ComponentType} Returns the enhanced styled component.
+ */
+var withStyledComponent = function withStyledComponent(WrappedComponent, styles) {
+  /**
+   * A styled component generated by combining WrappedComponent with additional styles.
+   * @type {React.ComponentType}
+   */
+  var StyledComponent = styled(WrappedComponent).withConfig({
+    displayName: "StyledComponent",
+    componentId: "sc-ujcdm3-0"
+  })(["", ";"], styles);
+
+  // Set default props from the original component to the styled component
+  StyledComponent.defaultProps = WrappedComponent.defaultProps;
+  return StyledComponent;
+};
+export default withStyledComponent;

package/dist/utils/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "withStyles", {
+  enumerable: true,
+  get: function get() {
+    return _withStyles["default"];
+  }
+});
+var _withStyles = _interopRequireDefault(require("./withStyles"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/utils/withStyles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/**
+ * Enhances a React component with additional styles using styled-components.
+ * @param {React.ComponentType} WrappedComponent - The React component to enhance.
+ * @param {TemplateStringsArray} styles - CSS styles as a TemplateStringsArray.
+ * @returns {React.ComponentType} Returns the enhanced styled component.
+ */
+var withStyledComponent = function withStyledComponent(WrappedComponent, styles) {
+  /**
+   * A styled component generated by combining WrappedComponent with additional styles.
+   * @type {React.ComponentType}
+   */
+  var StyledComponent = (0, _styledComponents["default"])(WrappedComponent).withConfig({
+    displayName: "StyledComponent",
+    componentId: "sc-ujcdm3-0"
+  })(["", ";"], styles);
+
+  // Set default props from the original component to the styled component
+  StyledComponent.defaultProps = WrappedComponent.defaultProps;
+  return StyledComponent;
+};
+var _default = exports["default"] = withStyledComponent;

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "@capillarytech/blaze-ui",
   "author": "Capillary Technologies",
-  "version": "0.1.6-alpha.3",
-  "description": "Capillary UI component library",
-  "main": "./dist/index.js",
-  "module": "./dist/esm/index.js",
-  "jsnext:main": "./dist/esm/index.js",
+  "version": "0.1.6-alpha.32",
+  "description": "Capillary UI component library with Ant Design v5",
+  "main": "./components/index.js",
   "sideEffects": [
     "*.css",
     "*.less",
@@ -26,14 +24,12 @@
     "!**/tests"
   ],
   "homepage": "https://github.com/Capillary/blaze-ui",
-  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
-  },
   "dependencies": {
+    "@ant-design/icons": "^5.2.6",
     "@capillarytech/cap-ui-utils": "^3.0.4",
+    "antd": "^5.12.0",
     "prop-types": "^15.8.1",
     "styled-components": "^5.3.11",
-    "react-intl": "^6.5.0"
+    "react-intl": "2.7.2"
   }
 }

package/utils/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.withStyles = void 0;
+var _withStyles = _interopRequireDefault(require("./withStyles"));
+exports.withStyles = _withStyles.default;
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/utils/withStyles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const withStyledComponent = (WrappedComponent, styles) => {
+  const StyledComponent = (0, _styledComponents.default)(WrappedComponent).withConfig({
+    displayName: "StyledComponent",
+    componentId: "sc-ujcdm3-0"
+  })(["", ";"], styles);
+  StyledComponent.defaultProps = WrappedComponent.defaultProps;
+  return StyledComponent;
+};
+var _default = exports.default = withStyledComponent;

package/CapHeading/CapHeading.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { HeadingWrapper, HeadingSpan } from './styles';
-
-const CapHeading = ({ type = 'h5', children, as, ...rest }) => {
-  return (
-    <HeadingWrapper type={type} as={as || 'div'} {...rest}>
-      {children}
-    </HeadingWrapper>
-  );
-};
-
-CapHeading.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-  as: PropTypes.string,
-};
-
-// Inline span version
-const CapHeadingSpan = ({ type = 'h5', children, ...rest }) => {
-  return (
-    <HeadingSpan type={type} {...rest}>
-      {children}
-    </HeadingSpan>
-  );
-};
-
-CapHeadingSpan.propTypes = {
-  type: PropTypes.oneOf([
-    'h0',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'h7',
-    'h8',
-    'h9',
-    'h10',
-    'label1',
-    'label2',
-    'label3',
-    'label4',
-    'label5',
-    'label6',
-  ]),
-  children: PropTypes.node,
-};
-
-CapHeading.Span = CapHeadingSpan;
-
-export default CapHeading;

package/CapHeading/index.js

@@ -1 +0,0 @@
-export { default } from './CapHeading';