oa-componentbook 1.0.1-stage.4 → 1.0.1-stage.400

package/build/widgets/oa-widget-image-gallery/ThumbnailGrid.js

@@ -0,0 +1,146 @@
+"use strict";
+
+require("core-js/modules/es.weak-map.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/web.dom-collections.iterator.js");
+require("core-js/modules/es.promise.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactIntersectionObserver = require("react-intersection-observer");
+var _CustomLoader = _interopRequireDefault(require("../../components/oa-component-loader/CustomLoader"));
+var _imageCache = require("./imageCache");
+var _imageGalleryStyle = require("./imageGalleryStyle");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable */
+
+function ThumbnailGrid(_ref) {
+  let {
+    images,
+    onImageClick,
+    fetchImage
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.ThumbnailGridStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thumbnailGridStyleBox"
+  }, images.map((img, index) => /*#__PURE__*/_react.default.createElement(ThumbnailImage, {
+    fetchImage: fetchImage,
+    key: img.id || index,
+    img: img,
+    onClick: () => onImageClick(index),
+    displayDocName: img.displayDocName
+  }))));
+}
+ThumbnailGrid.propTypes = {
+  images: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+    thumbnailUrl: _propTypes.default.string,
+    originalImageUrl: _propTypes.default.string
+  })).isRequired,
+  onImageClick: _propTypes.default.func.isRequired,
+  fetchImage: _propTypes.default.func
+};
+ThumbnailGrid.defaultProps = {
+  fetchImage: () => {}
+};
+function ThumbnailImage(_ref2) {
+  let {
+    img,
+    onClick,
+    fetchImage,
+    displayDocName
+  } = _ref2;
+  const {
+    ref,
+    inView
+  } = (0, _reactIntersectionObserver.useInView)({
+    triggerOnce: true
+  });
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [resolvedSrc, setResolvedSrc] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    const resolveImageSrc = async () => {
+      const rawUrl = img.thumbnailUrl || img.originalImageUrl;
+      if (!rawUrl) return;
+      const cacheKey = rawUrl;
+      const cached = (0, _imageCache.getCachedImage)(cacheKey);
+      if (cached) {
+        setResolvedSrc(cached);
+        return;
+      }
+      const isLikelyDirectImage = /\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i.test(rawUrl);
+      if (isLikelyDirectImage) {
+        (0, _imageCache.setCachedImage)(cacheKey, rawUrl);
+        setResolvedSrc(rawUrl);
+      } else {
+        try {
+          const response = await fetchImage(rawUrl);
+          (0, _imageCache.setCachedImage)(cacheKey, response);
+          setResolvedSrc(response);
+        } catch (error) {
+          console.error("Failed to fetch image URL:", error);
+        }
+      }
+    };
+    if (inView && !resolvedSrc) {
+      resolveImageSrc();
+    }
+  }, [inView, img.thumbnailUrl, img.originalImageUrl, resolvedSrc, fetchImage]);
+  return /*#__PURE__*/_react.default.createElement(_imageGalleryStyle.ThumbnailGridBoxStyle, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "thumbnailGridBox",
+    ref: ref,
+    onClick: onClick,
+    onKeyDown: e => e.key === "Enter" && onClick(),
+    role: "button",
+    tabIndex: 0,
+    style: {
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CustomLoader.default, {
+    spinning: !loaded && inView
+  }, inView && resolvedSrc && /*#__PURE__*/_react.default.createElement("img", {
+    src: resolvedSrc,
+    alt: "thumbnail",
+    style: {
+      display: loaded ? 'block' : 'none',
+      width: '100%',
+      borderRadius: 8,
+      background: '#e0e0e0',
+      minHeight: 120,
+      objectFit: 'cover'
+    },
+    onLoad: () => setLoaded(true)
+  })), loaded && /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      marginTop: 8,
+      marginLeft: 8,
+      marginBottom: 4,
+      color: '#222',
+      fontSize: 15,
+      fontWeight: 400,
+      letterSpacing: 0.2
+    }
+  }, displayDocName || 'Image')));
+}
+ThumbnailImage.propTypes = {
+  img: _propTypes.default.shape({
+    thumbnailUrl: _propTypes.default.string,
+    originalImageUrl: _propTypes.default.string
+  }).isRequired,
+  onClick: _propTypes.default.func.isRequired,
+  fetchImage: _propTypes.default.func,
+  displayDocName: _propTypes.default.string
+};
+ThumbnailImage.defaultProps = {
+  fetchImage: () => {},
+  displayDocName: ''
+};
+var _default = exports.default = ThumbnailGrid;

package/build/widgets/oa-widget-image-gallery/imageCache.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCachedImage = getCachedImage;
+exports.setCachedImage = setCachedImage;
+require("core-js/modules/web.dom-collections.iterator.js");
+const imageCache = new Map();
+function getCachedImage(key) {
+  return imageCache.get(key);
+}
+function setCachedImage(key, url) {
+  imageCache.set(key, url);
+}

package/build/widgets/oa-widget-image-gallery/imageGalleryStyle.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThumbnailGridStyle = exports.ThumbnailGridBoxStyle = exports.StylesContainer = exports.FullScreenStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StylesContainer = exports.StylesContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\n.topBottomGallarySec{ display:flex; flex-direction:row; margin-bottom:16px; justify-content:flex-end;}\n\n.thumbnailGridStyle{display: grid\n;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n\n\n"])));
+const ThumbnailGridStyle = exports.ThumbnailGridStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.thumbnailGridStyleBox{display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 8px;}\n"])));
+const ThumbnailGridBoxStyle = exports.ThumbnailGridBoxStyle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.thumbnailGridBox{ position: relative;\n    aspect-ratio: 1 / 1; padding: 8px; border-radius: 4px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgb(240, 240, 240);\n    gap:6px;\n    }\n\n    .thumbnailGridBox img{ border-radius:4px;    width: 100%;\n    height: 100%;  transition: transform .2s;\n    object-fit: cover;} \n\n    .thumbnailGridBox img:hover{ transform: scale(1.02);} \n\n"])));
+const FullScreenStyle = exports.FullScreenStyle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n\n.overlay{\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(31, 31, 31, 0.82);\n    z-index: 99999;\n  }\n\n\n\n  .navButtonLeft, .navButtonRight{\n    position: absolute;\n    top: 50%;\n    font-size: 16px;\n    cursor: pointer;\n    user-select: none;\n    background: rgba(0, 0, 0, 0.7);\n    border-radius: 50%;\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .navButtonLeft:hover, .navButtonRight:hover{ background: rgba(0, 0, 0, 0.9);}\n\n.navButtonLeft{left: 10px;}\n.navButtonRight {right: 10px;}\n.downloadAll{color: #FFF;\n    padding: 10px 24px;\n    border-radius: 4px;\n    border: 1px solid #FFF;\n    text-align: center;\n    font-size: 14px;\n    line-height: 20px;\n    position: absolute; cursor: pointer;\n    bottom: 60px;\n    left: 50%;\n    transform: translate(-50%, -50%);}\n\n.header{padding:24px; display:flex; flex-direction:row;  justify-content:space-between; align-items:center;}\n\n"])));
+
+// export default StylesContainer;

package/build/widgets/oa-widget-item-info-card/InfoCardListWidget.js

@@ -0,0 +1,60 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.reduce.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ItemInfoCardWidget = _interopRequireDefault(require("./ItemInfoCardWidget"));
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } // widgets/oa-widget-item-info-card-list/InfoCardListWidget.js
+const SUCCESS_GREEN = '#00875A';
+function InfoCardListWidget(_ref) {
+  let {
+    items,
+    bordered,
+    customStyle
+  } = _ref;
+  const total = items.reduce((sum, item) => sum + Number(item.props.value || 0), 0);
+  return /*#__PURE__*/_react.default.createElement(_styles.Container, {
+    bordered: bordered,
+    style: customStyle
+  }, items.map(item => /*#__PURE__*/_react.default.createElement(_ItemInfoCardWidget.default, _extends({
+    key: item.key
+  }, item.props))), /*#__PURE__*/_react.default.createElement(_styles.TotalRow, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    style: {
+      color: _ColorVariablesMap.default['--color-positive']
+    }
+  }, "Order Total"), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t1-500",
+    style: {
+      color: _ColorVariablesMap.default['--color-positive']
+    }
+  }, "\u20B9", total.toLocaleString())));
+}
+InfoCardListWidget.propTypes = {
+  /** all of your info-card items (must have .key and .props.value) */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    props: _propTypes.default.shape({
+      value: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired
+    }).isRequired
+  })).isRequired,
+  /** if true, the outer container gets a light grey border */
+  bordered: _propTypes.default.bool,
+  /** optional style object you can use to tweak margin/layout */
+  customStyle: _propTypes.default.object
+};
+InfoCardListWidget.defaultProps = {
+  bordered: false,
+  customStyle: {}
+};
+var _default = exports.default = InfoCardListWidget;

package/build/widgets/oa-widget-item-info-card/ItemInfoCardWidget.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.symbol.description.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
+/**
+ * A simple info card that displays an image, title, subtitle, description, and value.
+ */
+function ItemInfoCardWidget(_ref) {
+  let {
+    title,
+    value,
+    subTitle,
+    description,
+    image,
+    subText,
+    subDescription
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_styles.ItemInfoCard, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "productBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "iconAndtextSec"
+  }, image && /*#__PURE__*/_react.default.createElement("div", {
+    className: "productIcon"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: title,
+    className: "product-image"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "product-info"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, title), subTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margin-top-4 margin-bottom-12"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, subTitle)), description && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, description), subDescription && /*#__PURE__*/_react.default.createElement("div", {
+    className: "margion-top-4"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-b2-400",
+    color: "secondary-content"
+  }, subDescription)))), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "primary-content"
+  }, "\u20B9", value), subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-button-500",
+    color: "secondary-content"
+  }, subText)));
+}
+ItemInfoCardWidget.propTypes = {
+  image: _propTypes.default.string,
+  title: _propTypes.default.string.isRequired,
+  value: _propTypes.default.number.isRequired,
+  subTitle: _propTypes.default.string,
+  subText: _propTypes.default.string,
+  description: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
+};
+ItemInfoCardWidget.defaultProps = {
+  image: null,
+  subTitle: "",
+  description: ""
+};
+var _default = exports.default = ItemInfoCardWidget;

package/build/widgets/oa-widget-item-info-card/styles.css

@@ -0,0 +1,50 @@
+.product-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px;
+    border-radius: 12px;
+    background-color: #f9f9f9;
+    width: 100%;
+    max-width: 480px;
+  }
+  
+  .product-image {
+    width: 64px;
+    height: 64px;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+  
+  .product-info {
+    flex: 1;
+  }
+  
+  .product-title-price {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  
+  .product-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin: 0;
+  }
+  
+  .product-price {
+    font-weight: bold;
+    color: #111;
+  }
+  
+  .product-specs {
+    color: #666;
+    margin-top: 2px;
+  }
+  
+  .product-sku {
+    color: #999;
+    font-size: 12px;
+    margin-top: 2px;
+  }
+  

package/build/widgets/oa-widget-item-info-card/styles.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TotalRow = exports.ItemInfoCard = exports.Container = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const Container = exports.Container = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #ffffff;\n  border-radius: 12px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
+const TotalRow = exports.TotalRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    border-top: 1px solid #e0e0e0;\n    padding: 16px 16px 0 16px;\n    margin: 0 0 0 -16px;\n    width: calc(100% + 32px);\n\n\n    .gstAndCost{display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    justify-content: center;}\n"])));
+const ItemInfoCard = exports.ItemInfoCard = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n.productBox{width:100%; display:flex; flex-direction:row; justify-content: space-between; padding:12px 0;}\n.productIcon{border-radius: 12px; background: #F6F6F6; width:80px; height:80px; display:flex; align-items:center; justify-content:center;}\n.productIcon img{height:64px;}\n.iconAndtextSec{display:flex; flex-direction:row; gap:12px; width:calc(100% - 88px);}\n.product-info {display: flex; flex-direction: column; width: calc(100% - 92px);}\n"])));
+var _default = exports.default = {};

package/build/widgets/oa-widget-key-value/KeyValueWidget.js

@@ -8,8 +8,11 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _utils = require("../../utils");
+var _CustomTag = _interopRequireDefault(require("../../components/oa-component-tag/CustomTag"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable */
+
 /**
  * Renders a view displaying key-value pairs in a structured format.
  *
@@ -17,6 +20,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {Object} props.data - An object containing key-value pairs to be displayed.
  * @param {Array<number>} [props.columnLayout] - An array defining the number of items per column.
  * @param {Object} [props.info] - An object containing information about a key-value pair.
+ * @param {boolean} [props.fullWidth] - If true, uses 30%/70% width distribution, otherwise uses previous layout.
  *
  * @returns {JSX.Element} A component that renders key-value pairs in a grid layout.
  */
@@ -24,7 +28,10 @@ function KeyValueDataView(_ref) {
   let {
     data,
     columnLayout,
-    info
+    info,
+    tagStatus,
+    customClassName,
+    fullWidth = false
   } = _ref;
   let actualColumnLayout = [];
   if (columnLayout.length === 0) {
@@ -40,32 +47,45 @@ function KeyValueDataView(_ref) {
   }, actualColumnLayout.map((element, layoutIdx) => {
     entryIdx += layoutIdx - 1 >= 0 ? actualColumnLayout[layoutIdx - 1] : 0;
     return /*#__PURE__*/_react.default.createElement("div", {
-      className: className,
+      className: customClassName !== null && customClassName !== void 0 ? customClassName : className,
       key: (0, _utils.getUUID)()
     }, Object.entries(data).splice(entryIdx, element).map(_ref2 => {
       let [key, value] = _ref2;
       return /*#__PURE__*/_react.default.createElement("div", {
-        className: "valuestyle",
+        className: "valuestyle ".concat(fullWidth ? "full-width" : null),
         key: (0, _utils.getUUID)()
       }, (info === null || info === void 0 ? void 0 : info.infoKey) === key ? /*#__PURE__*/_react.default.createElement("b", {
         className: "type-b2-400"
       }, /*#__PURE__*/_react.default.createElement("span", {
         style: {
-          color: 'var(--color-primary-content)'
+          color: "var(--color-primary-content)"
         }
       }, key, /*#__PURE__*/_react.default.createElement("em", {
         style: {
-          marginLeft: '4px',
-          position: 'relative',
-          top: '3px',
-          color: 'var(--color-secondary-content)'
+          marginLeft: "4px",
+          position: "relative",
+          top: "3px",
+          color: "var(--color-secondary-content)"
         }
       }, info === null || info === void 0 ? void 0 : info.infoData))) : /*#__PURE__*/_react.default.createElement("b", {
         className: "type-b2-400"
-      }, key, ":"), ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) && /*#__PURE__*/_react.default.createElement("span", {
+      }, key, ":"), /*#__PURE__*/_react.default.createElement("span", {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "8px"
+        }
+      }, ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) && /*#__PURE__*/_react.default.createElement("span", {
         className: "type-b2-400",
         title: value
-      }, value) || _react.default.isValidElement && /*#__PURE__*/_react.default.createElement("span", null, value));
+      }, value) || _react.default.isValidElement && /*#__PURE__*/_react.default.createElement("span", null, value), (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagKey) === key && (tagStatus === null || tagStatus === void 0 ? void 0 : tagStatus.tagData) && /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
+        style: {
+          width: "100px"
+        },
+        type: tagStatus.tagData.type || "success",
+        label: tagStatus.tagData.label,
+        size: tagStatus.tagData.size || "small"
+      })));
     }));
   }))));
 }
@@ -75,13 +95,27 @@ KeyValueDataView.propTypes = {
   info: _propTypes.default.shape({
     infoData: _propTypes.default.node,
     infoKey: _propTypes.default.string
-  })
+  }),
+  tagStatus: _propTypes.default.shape({
+    tagKey: _propTypes.default.string,
+    tagData: _propTypes.default.shape({
+      type: _propTypes.default.string,
+      label: _propTypes.default.string,
+      size: _propTypes.default.string
+    })
+  }),
+  customClassName: _propTypes.default.string,
+  fullWidth: _propTypes.default.bool
 };
 KeyValueDataView.defaultProps = {
   columnLayout: [],
   info: {
     infoData: null,
-    infoKey: ''
+    infoKey: ""
+  },
+  tagStatus: {
+    tagKey: "",
+    tagData: null
   }
 };
 var _default = exports.default = KeyValueDataView;

package/build/widgets/oa-widget-key-value/styles.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueWidgetStyles.js
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    width: 180px;\n    word-wrap: break-word;\n    font-style: normal;\n    color: var(--color-secondary-content);  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n"])));
+const KeyValueGroup = exports.KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child,.col-md-12:last-child,.col-md-3:last-child,.col-md-6:last-child  {\n    padding: 0;\n  }\n  \n  .valuestyle {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle b {\n    width: 38.734%;\n    font-style: normal;\n    color: var(--color-primary-content); \n  }\n\n  .valuestyle span {\n    width: 180px;\n    word-wrap: break-word;\n    font-style: normal;\n    color: var(--color-secondary-content);  }\n\n  .valuestyle span + span{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    padding: 0 4px 0 0;\n  }\n\n  /* Add these CSS rules for full-width */\n    .valuestyle.full-width {\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n\n  .valuestyle.full-width b {\n    width: 30%;\n  }\n\n  .valuestyle.full-width span {\n    width: 100%;\n  }\n\n"])));
 const KeyValueGroups = exports.KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.container {\n  max-width: 1154px;\n  margin: 0 auto;\n  padding: 0 16px;\n}\n.container-fluid{\n    width: 100%;\n    padding: 0 16px;\n}\n.row {\n    display: flex;\n    flex-direction: column;\n}\n.row::after {\n    content: \"\";\n    clear: both;\n    display: table;\n}\n.col-xs-1 {\n  width: 8.33333%;\n}\n\n.col-xs-2 {\n  width: 16.66667%;\n}\n\n.col-xs-3 {\n  width: 25%;\n}\n\n.col-xs-4 {\n  width: 33.33333%;\n}\n\n.col-xs-5 {\n  width: 41.66667%;\n}\n\n.col-xs-6 {\n  width: 50%;\n}\n\n.col-xs-7 {\n  width: 58.33333%;\n}\n\n.col-xs-8 {\n  width: 66.66667%;\n}\n\n.col-xs-9 {\n  width: 75%;\n}\n\n.col-xs-10 {\n  width: 83.33333%;\n}\n\n.col-xs-11 {\n  width: 91.66667%;\n}\n\n.col-xs-12 {\n  width: 100%;\n}\n@media (min-width: 768px) {\n    .row {\n    flex-direction: row;\n}\n  .col-sm-1 {\n    width: 8.33333%;\n  }\n\n  .col-sm-2 {\n    width: 16.66667%;\n  }\n\n  .col-sm-3 {\n    width: 25%;\n  }\n\n  .col-sm-4 {\n    width: 33.33333%;\n  }\n\n  .col-sm-5 {\n    width: 41.66667%;\n  }\n\n  .col-sm-6 {\n    width: 50%;\n  }\n  .col-sm-7 {\n    width: 58.33333%;\n  }\n  .col-sm-8 {\n    width: 66.66667%;\n  }\n  .col-sm-9 {\n    width: 75%;\n  }\n  .col-sm-10 {\n    width: 83.33333%;\n  }\n  .col-sm-11 {\n    width: 91.66667%;\n  }\n  .col-sm-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 768px) {\n  .col-md-1 {\n    width: 8.33333%;\n  }\n  .col-md-2 {\n    width: 16.66667%;\n  }\n  .col-md-3 {\n    width: 25%;\n  }\n  .col-md-4 {\n    width: 33.33333%;\n    float: left;\n  }\n\n  .col-md-5 {\n    width: 41.66667%;\n  }\n\n  .col-md-6 {\n    width: 50%;\n  }\n\n  .col-md-7 {\n    width: 58.33333%;\n  }\n\n  .col-md-8 {\n    width: 66.66667%;\n  }\n\n  .col-md-9 {\n    width: 75%;\n  }\n\n  .col-md-10 {\n    width: 83.33333%;\n  }\n  .col-md-11 {\n    width: 91.66667%;\n  }\n\n  .col-md-12 {\n    width: 100%;\n  }\n\n}\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n    .gutter{\n        padding: 0 24px 0 0;\n    }\n  .col-lg-1 {\n    width: 8.33333%;\n  }\n  .col-lg-2 {\n    width: 16.66667%;\n  }\n  .col-lg-3 {\n    width: 25%;\n    float: left;\n  }\n  .col-lg-4 {\n    width: 33.33333%;\n    float: left;\n  }\n  .col-lg-5 {\n    width: 41.66667%;\n  }\n  .col-lg-6 {\n    width: 50%;\n  }\n  .col-lg-7 {\n    width: 58.33333%;\n  }\n  .col-lg-8 {\n    width: 66.66667%;\n  }\n  .col-lg-9 {\n    width: 75%;\n  }\n  .col-lg-10 {\n    width: 83.33333%;\n  }\n\n  .col-lg-11 {\n    width: 91.66667%;\n  }\n\n  .col-lg-12 {\n    width: 100%;\n  }\n}\n\n@media (min-width: 1200px) {\n    .gutter{\n        padding: 0 32px 0 0;\n    }\n  .col-xl-1 {\n    width: 8.33333%;\n  }\n\n \n}\n@media (max-width: 767px) {\n  .gutter{\n      padding: 0;\n  }\n}\n"])));
 const StyledBold = exports.StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primary-content);\n  font-weight: 400;\n"])));
 const StyledSpan = exports.StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* vertical-align: bottom; */\n  color: var(--color-secondary-content);\n  font-weight: 400;\n  word-break: break-word;\n"])));

package/build/widgets/oa-widget-kpi/KPICardWidget.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
+var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
+var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
+var _styles = _interopRequireDefault(require("./styles"));
+var _AccessAlarmOutlined = _interopRequireDefault(require("@material-ui/icons/AccessAlarmOutlined"));
+const _excluded = ["type", "iconConfig", "tooltip"];
+/* eslint-disable */
+// ✅ no curly braces
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function KPICardWidget(_ref) {
+  let {
+    title,
+    subTitle,
+    subText,
+    titleSubConfig
+  } = _ref;
+  const renderTitleSubConfig = () => {
+    if (!titleSubConfig) return null;
+    const {
+        type,
+        iconConfig,
+        tooltip
+      } = titleSubConfig,
+      config = _objectWithoutProperties(titleSubConfig, _excluded);
+    if (type === "tooltip" && iconConfig && tooltip) {
+      return /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+        title: tooltip,
+        placement: config.placement || "top"
+      }, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, iconConfig));
+    }
+
+    // Add more types here as needed
+    // if (type === "button" && iconConfig) {
+    //   return <CustomButton {...config} iconConfig={iconConfig} />;
+    // }
+
+    return null;
+  };
+  return /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement(_antd.Card, null, title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "title-container"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "parimary-content"
+  }, title, " ", renderTitleSubConfig())), subTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: "padding-top-8 inclGst"
+  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-h1-500",
+    color: "parimary-content"
+  }, subTitle), subText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    typography: "type-t2-700",
+    color: "secondary-content"
+  }, subText))));
+}
+KPICardWidget.propTypes = {
+  title: _propTypes.default.string,
+  subTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  subText: _propTypes.default.string,
+  titleSubConfig: _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["tooltip", "button"]),
+    // Add more types as needed
+    iconConfig: _propTypes.default.object,
+    // MaterialIcon props (same as SidebarWidget)
+    tooltip: _propTypes.default.string,
+    // For tooltip type
+    placement: _propTypes.default.string // Tooltip placement
+    // Add more config options as needed
+  })
+};
+KPICardWidget.defaultProps = {
+  title: "Total Active Orders",
+  subTitle: "",
+  subText: "",
+  titleSubConfig: null
+};
+var _default = exports.default = KPICardWidget;

package/build/widgets/oa-widget-kpi/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject; // styles.js
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const OaCardStyle = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  .ant-card-body {\n    padding: 24px 16px !important;\n    border-radius: 16px;\n    background: #f6f6f6;\n  }\n  .ant-card-bordered {\n    border: none;\n  }\n  .padding-top-8 {\n    padding: 8px 0 0;\n  }\n\n  .inclGst {\n    display: flex;\n    flex-direction: row;\n    gap: 6px;\n    align-items: anchor-center;\n  }\n\n  .title-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 8px;\n  }\n\n  .title-container span{\n    display: flex; align-items: center;\n    gap: 4px;\n  }\n\n  .title-container .ant-typography {\n    flex: 1;\n  }\n"])));
+var _default = exports.default = OaCardStyle;