@unbxd-ui/unbxd-react-components 0.3.1 → 0.3.2-beta.10

package/components/Link/linkTheme.scss

@@ -0,0 +1,79 @@
+/**
+    Theme styles for Link component - visual appearance and branding
+**/
+
+.RCB-link {
+    // Primary appearance (default link styling)
+    &-primary {
+        color: #3e71f2;
+        
+        &:hover {
+            color: #3865d9;
+        }
+        
+        &:active {
+            color: #3e71f2;
+        }
+        
+        &:visited {
+            color: #6f42c1;
+        }
+    }
+    
+    // Secondary appearance
+    &-secondary {
+        color: #6c757d;
+        text-decoration: none;
+        
+        &:hover {
+            color: #495057;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #343a40;
+        }
+    }
+    
+    // Danger appearance
+    &-danger {
+        color: #dc3545;
+        text-decoration: none;
+        
+        &:hover {
+            color: #c82333;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #bd2130;
+        }
+    }
+    
+    // Success appearance
+    &-success {
+        color: #28a745;
+        text-decoration: none;
+        
+        &:hover {
+            color: #218838;
+            text-decoration: underline;
+        }
+        
+        &:active {
+            color: #1e7e34;
+        }
+    }
+    
+    // External link styling
+    &-external {
+        .RCB-link-external-icon {
+            color: currentColor;
+            opacity: 0.7;
+        }
+        
+        &:hover .RCB-link-external-icon {
+            opacity: 1;
+        }
+    }
+}

package/components/List/list.css

@@ -0,0 +1 @@
+.RCB-list{margin:0;padding:0}

package/components/List/listCore.scss

@@ -0,0 +1,6 @@
+.RCB {
+    &-list {
+        margin: 0;
+        padding: 0;
+    }
+}

package/components/MetricCard/MetricCard.css

@@ -0,0 +1 @@
+.RCB-metric-card-wrapper{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:16px;margin-bottom:32px}@media (min-width: 768px){.RCB-metric-card-wrapper{grid-template-columns:repeat(3, minmax(0, 1fr));gap:16px}}@media (min-width: 1024px){.RCB-metric-card-wrapper{grid-template-columns:repeat(6, minmax(0, 1fr));gap:20px}}.RCB-metric-card-wrapper .RCB-metric-card-item{border-radius:12px;padding:16px;position:relative;overflow:hidden;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;background:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid #e1e7ef;animation:slide-up 0.5s ease-out}.RCB-metric-card-wrapper .RCB-metric-card-item:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data{position:relative;z-index:10}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-icon{background-color:#06b6d4;padding:0.5rem;border-radius:0.75rem;border:1px solid #e1e7ef;height:34px}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-title .RCB-metric-title-text{font-size:0.875rem;line-height:1.25rem;color:#65758b}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value{display:flex;align-items:center;gap:0.5rem}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-value-text{font-size:1.125rem;line-height:1.75rem;font-weight:700;color:#0f1729;letter-spacing:-0.025em}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text{display:flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem;border-radius:9999px;font-size:0.75rem;line-height:1rem;font-weight:500}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.positive{background-color:#dcfce7;color:#15803d}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-metric-data .RCB-metric-value .RCB-metric-compare-text.negative{background-color:#fee2e2;color:#b91c1c}.RCB-metric-card-wrapper .RCB-metric-card-item .RCB-bottom-right-circle{position:absolute;right:-1rem;bottom:-1rem;width:5rem;height:5rem;border-radius:50%;opacity:0.1;background-color:var(--decorative-color, #06b6d4)}@keyframes slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

package/components/MetricCard/MetricCard.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = MetricCard;
+var _react = _interopRequireDefault(require("react"));
+var _icon = _interopRequireDefault(require("../../core/icon"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function MetricCard(props) {
+  var _props$metricConfigs = props.metricConfigs,
+    metricConfigs = _props$metricConfigs === void 0 ? [] : _props$metricConfigs;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-metric-card-wrapper"
+  }, metricConfigs.map(function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? '' : _ref$id,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? '' : _ref$value,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon,
+      _ref$iconBgColor = _ref.iconBgColor,
+      iconBgColor = _ref$iconBgColor === void 0 ? '#ccc' : _ref$iconBgColor,
+      _ref$hasDiff = _ref.hasDiff,
+      hasDiff = _ref$hasDiff === void 0 ? false : _ref$hasDiff,
+      _ref$comparePercentag = _ref.comparePercentage,
+      comparePercentage = _ref$comparePercentag === void 0 ? 0 : _ref$comparePercentag;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-card-item",
+      key: id
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-data"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-icon",
+      style: {
+        backgroundColor: iconBgColor
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: icon,
+      size: "16px",
+      color: "white"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-title-text"
+    }, " ", name, " ")), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-value"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-value-text"
+    }, value), hasDiff ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-metric-compare-text ".concat(comparePercentage < 0 ? 'negative' : 'positive')
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      icon: comparePercentage < 0 ? 'arrow-down' : 'arrow-up',
+      size: "12px"
+    }), Math.abs(comparePercentage) + '%') : null)), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "RCB-bottom-right-circle",
+      style: {
+        backgroundColor: iconBgColor
+      }
+    }));
+  }));
+}

package/components/MetricCard/MetricCard.scss

@@ -0,0 +1,118 @@
+.RCB-metric-card-wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+  margin-bottom: 32px;
+
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 16px;
+  }
+
+  @media (min-width: 1024px) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+    gap: 20px;
+  }
+
+  .RCB-metric-card-item {
+    border-radius: 12px;
+    padding: 16px;
+    position: relative;
+    overflow: hidden;
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+    background: hsl(0, 0%, 100%);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border: 1px solid hsl(214, 32%, 91%);
+    animation: slide-up 0.5s ease-out;
+
+    &:hover {
+      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+        0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+
+    .RCB-metric-data {
+      position: relative;
+      z-index: 10;
+
+      .RCB-metric-title {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 0.75rem;
+
+        .RCB-metric-title-icon {
+          background-color: rgb(6, 182, 212);
+          padding: 0.5rem;
+          border-radius: 0.75rem;
+          border: 1px solid #e1e7ef;
+          height: 34px;
+        }
+
+        .RCB-metric-title-text {
+          font-size: 0.875rem;
+          line-height: 1.25rem;
+          color: hsl(215, 16%, 47%);
+        }
+      }
+
+      .RCB-metric-value {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        .RCB-metric-value-text {
+          font-size: 1.125rem;
+          line-height: 1.75rem;
+          font-weight: 700;
+          color: #0f1729;
+          letter-spacing: -0.025em;
+        }
+
+        .RCB-metric-compare-text {
+          display: flex;
+          align-items: center;
+          gap: 0.25rem;
+          padding: 0.125rem 0.5rem;
+          border-radius: 9999px;
+          font-size: 0.75rem;
+          line-height: 1rem;
+          font-weight: 500;
+
+          &.positive {
+            background-color: #dcfce7;
+            color: #15803d;
+          }
+
+          &.negative {
+            background-color: #fee2e2;
+            color: #b91c1c;
+          }
+        }
+      }
+    }
+
+    .RCB-bottom-right-circle {
+      position: absolute;
+      right: -1rem;
+      bottom: -1rem;
+      width: 5rem;
+      height: 5rem;
+      border-radius: 50%;
+      opacity: 0.1;
+      background-color: var(--decorative-color, rgb(6, 182, 212));
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+}

package/components/MetricCard/MetriicCard.stories.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithDifferencePercentage = exports.Default = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+require("./MetricCard.css");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var meta = {
+  title: 'Components/MetricCard',
+  component: _MetricCard["default"],
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: 'MetricCard displays key metrics in a grid layout.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    metricConfigs: {
+      description: 'Array of metric configuration objects with id, name, value, icon and iconBgColor properties',
+      control: 'object'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Sample metric data
+var sampleMetrics = [{
+  id: 1,
+  name: 'Impressions',
+  value: '20,588,028',
+  icon: 'preview',
+  iconBgColor: 'rgb(6, 182, 212)'
+}, {
+  id: 2,
+  name: 'Clicks',
+  value: '2,060,018',
+  icon: 'click-rate',
+  iconBgColor: 'rgb(59, 130, 246)'
+}, {
+  id: 3,
+  name: 'Add to Carts',
+  value: '609,718',
+  icon: 'cart-rate',
+  iconBgColor: 'rgb(245, 158, 11)'
+}, {
+  id: 4,
+  name: 'Orders',
+  value: '258,799',
+  icon: 'package',
+  iconBgColor: 'rgb(34, 197, 94)'
+}, {
+  id: 5,
+  name: 'Conversion Rate',
+  value: '1.26%',
+  icon: 'trending-up',
+  iconBgColor: 'rgb(207, 4, 173)'
+}, {
+  id: 6,
+  name: 'Revenue',
+  value: '$15,644,741',
+  icon: 'revenue',
+  iconBgColor: 'rgb(16, 185, 129)'
+}];
+
+// Sample metric data with difference percentages
+var metricsWithDiff = [{
+  id: 1,
+  name: 'Impressions',
+  value: '20,588,028',
+  icon: 'preview',
+  iconBgColor: 'rgb(6, 182, 212)',
+  hasDiff: true,
+  comparePercentage: 15.4
+}, {
+  id: 2,
+  name: 'Clicks',
+  value: '2,060,018',
+  icon: 'click-rate',
+  iconBgColor: 'rgb(59, 130, 246)',
+  hasDiff: true,
+  comparePercentage: -8.2
+}, {
+  id: 3,
+  name: 'Add to Carts',
+  value: '609,718',
+  icon: 'cart-rate',
+  iconBgColor: 'rgb(245, 158, 11)',
+  hasDiff: true,
+  comparePercentage: 22.7
+}, {
+  id: 4,
+  name: 'Orders',
+  value: '258,799',
+  icon: 'package',
+  iconBgColor: 'rgb(34, 197, 94)',
+  hasDiff: true,
+  comparePercentage: -5.3
+}, {
+  id: 5,
+  name: 'Conversion Rate',
+  value: '1.26%',
+  icon: 'trending-up',
+  iconBgColor: 'rgb(207, 4, 173)',
+  hasDiff: true,
+  comparePercentage: 3.8
+}, {
+  id: 6,
+  name: 'Revenue',
+  value: '$15,644,741',
+  icon: 'revenue',
+  iconBgColor: 'rgb(16, 185, 129)',
+  hasDiff: true,
+  comparePercentage: -12.1
+}];
+
+// Default Story
+var Default = exports.Default = {
+  args: {
+    metricConfigs: sampleMetrics
+  }
+};
+
+// Story with difference percentages
+var WithDifferencePercentage = exports.WithDifferencePercentage = {
+  args: {
+    metricConfigs: metricsWithDiff
+  }
+};

package/components/MetricCard/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _MetricCard = _interopRequireDefault(require("./MetricCard"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _MetricCard["default"];

package/components/Modal/modal.css

@@ -0,0 +1 @@
+.RCB-modal{position:absolute;top:0;width:100%;height:100%;background:rgba(0,0,0,0.8);display:flex;justify-content:center;align-items:center}.RCB-modal-body{background:#FFF;padding:20px}.RCB-modal-header{display:flex;margin-bottom:10px}.RCB-modal-title{flex:1}.RCB-modal-close{cursor:pointer}

package/components/Modal/modalCore.scss

@@ -0,0 +1,58 @@
+.RCB {
+    &-modal {
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        z-index: 2;
+
+        .modal-footer {
+            padding: 24px 24px;
+            margin: 20px -24px 0px;
+            border-radius: 0 0 8px 8px;
+            text-align: right;
+    
+            .RCB-btn {
+                margin-right: 14px;
+    
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+        }
+    }
+
+    &-modal-body {
+        background: #FFF;
+        border-radius: 8px;
+        padding: 0px;
+    }
+
+    &-modal-header {
+        display: flex;
+        margin-bottom: 0px;
+        padding: 24px 24px 10px;
+    }
+
+    &-modal-title {
+        flex: 1;
+        font-size: 18px;
+        font-weight: 700;
+        line-height: normal;
+    }
+
+    &-modal-close {
+        cursor: pointer;
+        &:before { 
+            content: "X";
+        }
+    }
+
+    &-modal-content {
+        padding: 24px 24px 0px;
+    }
+}

package/components/NoDataPlaceholder/noDataPlaceholderCore.scss

@@ -0,0 +1,33 @@
+.RCB-no-data-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 40px 20px;
+    text-align: center;
+}
+
+.RCB-no-data-image {
+    margin-bottom: 16px;
+}
+
+.RCB-no-data-image img {
+    max-width: 120px;
+    max-height: 120px;
+    object-fit: contain;
+}
+
+.RCB-no-data-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    margin-bottom: 8px;
+}
+
+.RCB-no-data-description {
+    font-size: 14px;
+    color: #666;
+    line-height: 1.5;
+}
+
+

package/components/NotificationComponent/notificationComponent.css

@@ -0,0 +1 @@
+.RCB-notif{padding:10px}.RCB-notif-success{color:#129274;border:1px solid #2cb292;background-color:#b7d2cb}.RCB-notif-error{color:#d25b5b;border:solid 1px #e75190;background-color:#fff9fc}.RCB-notif-warning{color:#445870;border:solid 1px #f09c0a;background-color:#fffaf2}.RCB-notif-info{color:#509DB9;border:solid 1px #509DB9;background-color:#DFF6FF}

package/components/NotificationComponent/notificationTheme.scss

@@ -0,0 +1,38 @@
+.RCB {
+    &-notif {
+        padding: 10px;
+        border-radius: 3px;
+
+        &-success {
+            color: #6DB886;
+            border: solid 1px #6DB886;
+            background-color: #DEF9E7;
+        }
+
+        &-error {
+            color: #CA4646;
+            border: solid 1px #CA4646;
+            background-color: #FFE4E4;
+            ;
+        }
+
+        &-warning {
+            color: #D5A555;
+            border: solid 1px #D5A555;
+            background-color: #FFF8EC;
+        }
+
+        &-info {
+            color: #3E71F2;
+            border: solid 1px #3E71F2;
+            background-color: #E7EDFF;
+        }
+    }
+}
+
+.notif-wrapper{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}

package/components/PIDItemComponent/PIDItemComponent.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PIDItemComponent;
+var _react = _interopRequireDefault(require("react"));
+var _lazyLoadImage = _interopRequireDefault(require("../../core/lazyLoadImage"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function PIDItemComponent(props) {
+  var DEFAULT_IMAGE = "https://libraries.unbxdapi.com/sdk-assets/defaultImage.svg";
+
+  // Desrructure props that are needed for client as well as server pagination types.
+  var _props$itemData = props.itemData,
+    itemData = _props$itemData === void 0 ? {} : _props$itemData,
+    _props$paginationType = props.paginationType,
+    clientPaginationType = _props$paginationType === void 0 ? "" : _props$paginationType,
+    _props$selectItem = props.selectItem,
+    clientSelectItem = _props$selectItem === void 0 ? function () {} : _props$selectItem,
+    _props$keysMap = props.keysMap,
+    clientKeysMap = _props$keysMap === void 0 ? {} : _props$keysMap,
+    _props$selectedItems = props.selectedItems,
+    clientSelectedItems = _props$selectedItems === void 0 ? [] : _props$selectedItems,
+    _props$data = props.data,
+    data = _props$data === void 0 ? {} : _props$data,
+    _props$index = props.index,
+    index = _props$index === void 0 ? 0 : _props$index,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style;
+  var _data$items = data.items,
+    items = _data$items === void 0 ? [] : _data$items,
+    _data$paginationType = data.paginationType,
+    serverPaginationType = _data$paginationType === void 0 ? "" : _data$paginationType,
+    _data$selectItem = data.selectItem,
+    serverSelectItem = _data$selectItem === void 0 ? function () {} : _data$selectItem,
+    _data$keysMap = data.keysMap,
+    serverKeysMap = _data$keysMap === void 0 ? {} : _data$keysMap,
+    _data$selectedItems = data.selectedItems,
+    serverSelectedItems = _data$selectedItems === void 0 ? [] : _data$selectedItems;
+
+  // Determine the pagination type
+  var paginationType = clientPaginationType ? "CLIENT" : serverPaginationType;
+
+  // Update the item data and select item function based on the pagination type
+  var updatedItemData = paginationType !== 'SERVER' ? itemData : items[index] || {};
+  var updatedSelectItem = paginationType !== 'SERVER' ? clientSelectItem : serverSelectItem;
+  var updatedKeysMap = paginationType !== 'SERVER' ? clientKeysMap : serverKeysMap || {};
+  var updatedSelectedItems = paginationType !== 'SERVER' ? clientSelectedItems : serverSelectedItems || [];
+
+  // Destructue the items value with its respective keys map provided in the props
+  var _updatedKeysMap$uniqu = updatedKeysMap.uniqueIdMap,
+    uniqueIdMap = _updatedKeysMap$uniqu === void 0 ? "uniqueId" : _updatedKeysMap$uniqu,
+    _updatedKeysMap$image = updatedKeysMap.imageUrlMap,
+    imageUrlMap = _updatedKeysMap$image === void 0 ? "imageUrl" : _updatedKeysMap$image,
+    _updatedKeysMap$title = updatedKeysMap.titleMap,
+    titleMap = _updatedKeysMap$title === void 0 ? "title" : _updatedKeysMap$title;
+  var title = updatedItemData[titleMap];
+  var imageUrl = Array.isArray(updatedItemData[imageUrlMap]) ? updatedItemData[imageUrlMap][0] : updatedItemData[imageUrlMap] ? updatedItemData[imageUrlMap] : DEFAULT_IMAGE;
+  var uniqueId = updatedItemData[uniqueIdMap];
+
+  // Check if the item is selected    
+  var isItemSelected = updatedSelectedItems.find(function (item) {
+    return item[uniqueIdMap] === uniqueId;
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "RCB-list-item RCB-pid-dd-item ".concat(isItemSelected ? "selected" : ""),
+    style: style,
+    onClick: function onClick() {
+      return updatedSelectItem(updatedItemData);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_lazyLoadImage["default"], {
+    id: uniqueId,
+    key: uniqueId,
+    className: "RCB-pid-product-image",
+    src: imageUrl
+  }), /*#__PURE__*/_react["default"].createElement("div", null, title && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "RCB-title",
+    title: title
+  }, title), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "RCB-pid-id show small-text text-transform-none clip-content"
+  }, " ID: ", uniqueId, " ")));
+}