@cashub/ui 0.49.0-beta.1 → 0.49.0-beta.11

package/Tab/TabList.js

@@ -15,6 +15,7 @@ const TabList = _ref => {
   let {
     children,
     wrap = true,
+    noBorder,
     ...props
   } = _ref;
   const wrapperRef = (0, _react.useRef)(null);
@@ -104,6 +105,7 @@ const TabList = _ref => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
     role: "tablist",
     $wrap: wrap,
+    $noBorder: noBorder,
     ...props,
     children: wrap ? children : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(TabWrapper, {
@@ -131,20 +133,25 @@ const TabList = _ref => {
 };
 const Container = _styledComponents.default.div`
   position: relative;
-  border-bottom: var(--border-width) solid var(--border-color);
+  ${_ref2 => {
+  let {
+    $noBorder
+  } = _ref2;
+  return !$noBorder && 'border-bottom: var(--border-width) solid var(--border-color);';
+}}
   margin-bottom: var(--spacing);
 
-  ${_ref2 => {
+  ${_ref3 => {
   let {
     $wrap
-  } = _ref2;
+  } = _ref3;
   return !$wrap && 'white-space: nowrap;';
 }}
 
-  ${_ref3 => {
+  ${_ref4 => {
   let {
     noMargin
-  } = _ref3;
+  } = _ref4;
   return noMargin && 'margin-bottom: 0;';
 }}
 `;

package/Tab/TabTab.js

@@ -26,6 +26,7 @@ const TabTab = _ref => {
   } = (0, _react.useContext)(_TabContext.default);
   const [isModify, setIsModify] = (0, _react.useState)(false);
   const [currentTitle, setCurrentTitle] = (0, _react.useState)(title);
+  const active = selected === name;
   const handleClick = (0, _react.useCallback)(() => {
     if (selected !== name) {
       onChange(name);
@@ -63,35 +64,47 @@ const TabTab = _ref => {
     role: "tab",
     onClick: handleClick,
     onDoubleClick: handleDoubleClick,
-    active: selected === name,
+    active: active,
     ...props,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TabLabel, {
+      active: active,
+      children: children
+    })
   });
 };
 const Tab = _styledComponents.default.div`
   background: transparent;
   padding: 10px var(--spacing-s);
   border: none;
-  border-bottom: 4px solid transparent;
 `;
 const ButtonTab = (0, _styledComponents.default)(Tab).attrs({
   as: 'button'
 })`
   color: var(--font-on-mute);
-  transition: color 0.3s, border 0.3s;
+  transition: color 0.3s;
   cursor: pointer;
-
   &:hover {
     color: var(--font-on-background);
   }
-
   ${_ref2 => {
   let {
     active
   } = _ref2;
+  return active && `
+      color: var(--color-primary);
+    `;
+}}
+`;
+const TabLabel = _styledComponents.default.span`
+  display: inline-block;
+  padding-bottom: 10px;
+  border-bottom: 4px solid transparent;
+  ${_ref3 => {
+  let {
+    active
+  } = _ref3;
   return active && `
       border-color: var(--color-primary);
-      color: var(--font-on-background);
     `;
 }}
 `;
@@ -101,5 +114,6 @@ const InputTab = (0, _styledComponents.default)(Tab).attrs({
   color: var(--font-on-background);
   border-color: var(--color-primary);
   outline: none;
+  border-bottom: 4px solid var(--color-primary);
 `;
 var _default = exports.default = TabTab;

package/icon/Icon.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _styledComponents = require("styled-components");
+var _image = require("../image");
+var _registry = _interopRequireDefault(require("./registry"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Icon = _ref => {
+  let {
+    src,
+    iconKey,
+    color,
+    size,
+    ...rest
+  } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const IconComponent = override || src;
+  const isComponent = typeof IconComponent === 'function';
+  return isComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+    style: {
+      display: 'inline-flex',
+      width: size || '48px',
+      height: size || '48px',
+      color: color || 'var(--color-primary)'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {})
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_image.ImageFluid, {
+    crossOrigin: "anonymous",
+    src: IconComponent,
+    ...rest
+  });
+};
+var _default = exports.default = Icon;

package/icon/assets/announcement.jsx

@@ -0,0 +1,8 @@
+const AnnouncementIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M689.749333 653.952H334.208a35.541333 35.541333 0 0 0 0 71.082667h355.541333a35.541333 35.541333 0 1 0 0-71.082667z" />
+    <path d="M796.416 262.869333h-56.874667L586.666667 115.328A108.458667 108.458667 0 0 0 511.786667 85.333333h-0.298667c-27.904 0-54.698667 10.752-74.88 29.994667L284.416 262.869333H227.541333A142.208 142.208 0 0 0 85.333333 405.077333v391.125334a142.208 142.208 0 0 0 142.208 142.208h568.874667A142.250667 142.250667 0 0 0 938.666667 796.16V405.034667a142.208 142.208 0 0 0-142.250667-142.165334z m-310.058667-96.341333l0.042667 0.042667a35.541333 35.541333 0 0 1 51.2-0.042667l99.925333 96.341333H386.474667l99.882666-96.341333z m381.184 629.632v0.085333a71.082667 71.082667 0 0 1-71.125333 71.04H227.541333a71.125333 71.125333 0 0 1-71.125333-71.125333V405.077333a71.168 71.168 0 0 1 71.125333-71.082666h568.917334c39.253333 0 71.082667 31.829333 71.082666 71.082666v391.082667z" />
+    <path d="M689.749333 476.16H334.165333a35.584 35.584 0 0 0-35.498666 35.584v0.042667c0 19.626667 15.914667 35.541333 35.541333 35.541333h355.584c19.626667 0 35.541333-15.957333 35.541333-35.584v-0.085333a35.498667 35.498667 0 0 0-35.584-35.498667z" />
+  </svg>
+);
+export default AnnouncementIcon;

package/icon/assets/certificate.jsx

@@ -0,0 +1,6 @@
+const CertificateIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M234.723556 68.266667A166.456889 166.456889 0 0 0 68.266667 234.723556v466.062222a166.456889 166.456889 0 0 0 166.456889 166.456889h66.56v66.56a33.28 33.28 0 0 0 45.653333 30.890666l154.112-61.582222 154.083555 61.610667a33.28 33.28 0 0 0 45.653334-30.919111v-66.56h66.56a166.456889 166.456889 0 0 0 166.456889-166.456889V234.723556A166.456889 166.456889 0 0 0 767.345778 68.266667H234.723556z m66.56 619.463111v112.924444h-66.56a99.84 99.84 0 0 1-99.84-99.84V234.695111a99.868444 99.868444 0 0 1 99.84-99.84h532.622222a99.868444 99.868444 0 0 1 99.868444 99.84v466.062222a99.868444 99.868444 0 0 1-99.84 99.84h-66.56v-112.896a233.073778 233.073778 0 1 0-399.502222 0z m66.588444-20.252445a166.456889 166.456889 0 1 1 264.704-201.898666 166.456889 166.456889 0 0 1-264.704 201.898666z m0 91.392a231.992889 231.992889 0 0 0 133.176889 41.813334 231.992889 231.992889 0 0 0 133.148444-41.813334v125.781334l-114.631111-45.852445a49.92 49.92 0 0 0-37.063111 0l-114.631111 45.852445V758.897778z m-66.56-557.425777a33.28 33.28 0 1 0 0 66.56h399.473778a33.28 33.28 0 1 0 0-66.56H301.312z" />
+  </svg>
+);
+export default CertificateIcon;

package/icon/assets/info.jsx

@@ -0,0 +1,17 @@
+const InfoIcon = (props) => (
+  <svg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg' {...props}>
+    <g clipPath='url(#clip0_249_12353)'>
+      <path
+        d='M9 18C4.02975 18 0 13.9703 0 9C0 4.02975 4.02975 0 9 0C13.9703 0 18 4.02975 18 9C18 13.9703 13.9703 18 9 18ZM9 16.5C13.1422 16.5 16.5 13.1422 16.5 9C16.5 4.85775 13.1422 1.5 9 1.5C4.85775 1.5 1.5 4.85775 1.5 9C1.5 13.1422 4.85775 16.5 9 16.5ZM8.25 8.25C8.25 8.05109 8.32902 7.86032 8.46967 7.71967C8.61032 7.57902 8.80109 7.5 9 7.5C9.19891 7.5 9.38968 7.57902 9.53033 7.71967C9.67098 7.86032 9.75 8.05109 9.75 8.25V13.5C9.75 13.6989 9.67098 13.8897 9.53033 14.0303C9.38968 14.171 9.19891 14.25 9 14.25C8.80109 14.25 8.61032 14.171 8.46967 14.0303C8.32902 13.8897 8.25 13.6989 8.25 13.5V8.25ZM8.925 5.85C8.64652 5.85 8.37945 5.73938 8.18254 5.54246C7.98562 5.34555 7.875 5.07848 7.875 4.8C7.875 4.52152 7.98562 4.25445 8.18254 4.05754C8.37945 3.86062 8.64652 3.75 8.925 3.75C9.20348 3.75 9.47055 3.86062 9.66746 4.05754C9.86438 4.25445 9.975 4.52152 9.975 4.8C9.975 5.07848 9.86438 5.34555 9.66746 5.54246C9.47055 5.73938 9.20348 5.85 8.925 5.85Z'
+        fill='currentColor'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_249_12353'>
+        <rect width='18' height='18' fill='currentColor' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default InfoIcon;

package/icon/assets/key.jsx

@@ -0,0 +1,7 @@
+const KeyIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M633.912889 109.710222c154.851556 0 280.376889 125.553778 280.376889 280.405334 0 154.823111-125.525333 280.376889-280.376889 280.376888-38.172444 0-75.377778-7.68-109.795556-22.328888a36.608 36.608 0 0 1 28.643556-67.299556A207.246222 207.246222 0 1 0 426.666667 390.115556c0 29.098667 6.001778 57.344 17.436444 83.370666a36.579556 36.579556 0 0 1-5.12 37.802667l-2.474667 2.759111-268.999111 268.970667v82.488889h99.498667v-54.954667a36.579556 36.579556 0 0 1 33.052444-36.408889l3.498667-0.170667H361.244444v-54.727111a36.579556 36.579556 0 0 1 33.052445-36.408889l3.527111-0.170666h69.063111a36.551111 36.551111 0 0 1 3.527111 72.988444l-3.498666 0.170667H434.346667v54.727111a36.579556 36.579556 0 0 1-33.024 36.408889l-3.527111 0.170666-57.685334-0.028444v55.011556a36.579556 36.579556 0 0 1-33.024 36.408888l-3.555555 0.142223H130.958222a36.579556 36.579556 0 0 1-36.408889-33.052445l-0.199111-3.498666v-134.229334c0-8.448 2.929778-16.64 8.305778-23.182222l2.446222-2.673778 262.855111-262.940444-1.052444-3.157334a279.722667 279.722667 0 0 1-13.226667-76.032l-0.142222-9.784888c0-154.851556 125.525333-280.405333 280.376889-280.405334z" />
+    <path d="M658.289778 316.956444a48.725333 48.725333 0 1 0 97.450666 0 48.725333 48.725333 0 0 0-97.450666 0z" />
+  </svg>
+);
+export default KeyIcon;

package/icon/assets/master-data.jsx

@@ -0,0 +1,6 @@
+const MasterDataIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M446.336 216.618667a32.853333 32.853333 0 0 1 32.853333 32.853333v295.338667h295.381334a32.853333 32.853333 0 0 1 32.554666 28.714666l0.256 4.138667a361.045333 361.045333 0 1 1-361.002666-361.045333z m-32.810667 67.456l-3.541333 0.426666a295.424 295.424 0 0 0 36.352 588.544 295.381333 295.381333 0 0 0 293.205333-258.986666l0.341334-3.584h-293.546667a32.810667 32.810667 0 0 1-32.554667-28.714667l-0.256-4.096v-293.546667zM610.474667 85.333333A328.192 328.192 0 0 1 938.666667 413.525333a32.810667 32.810667 0 0 1-32.853334 32.853334h-295.338666a32.810667 32.810667 0 0 1-32.853334-32.853334V118.186667a32.853333 32.853333 0 0 1 32.853334-32.810667z m32.810666 67.669334v227.712h227.669334l-0.341334-2.816a262.741333 262.741333 0 0 0-224.512-224.512l-2.816-0.426667z" />
+  </svg>
+);
+export default MasterDataIcon;

package/icon/assets/price-change.jsx

@@ -0,0 +1,7 @@
+const PriceChangeIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M512.142222 764.700444a32.199111 32.199111 0 0 1-32.170666-32.170666V651.377778h-113.664a32.142222 32.142222 0 0 1 0-64.256h113.635555v-71.68h-113.635555a32.085333 32.085333 0 0 1-29.696-44.430222 32.142222 32.142222 0 0 1 29.696-19.854223h108.970666l-109.909333-109.767111a32.142222 32.142222 0 0 1 45.511111-45.397333l101.205333 101.12 101.205334-101.148445a31.971556 31.971556 0 0 1 40.561777-3.982222 32.142222 32.142222 0 0 1 4.835556 49.436445l-109.681778 109.767111h108.942222a32.142222 32.142222 0 1 1 0 64.284444h-113.635555v71.68h113.664a32.142222 32.142222 0 1 1 0 64.284445h-113.664v81.123555a32.170667 32.170667 0 0 1-32.170667 32.142222z" />
+    <path d="M512 938.666667A427.434667 427.434667 0 0 1 85.333333 506.737778 422.371556 422.371556 0 0 1 121.059556 341.333333a423.765333 423.765333 0 0 1 235.292444-226.360889 424.192 424.192 0 0 1 326.542222 6.257778 32.142222 32.142222 0 1 1-25.713778 58.88 362.524444 362.524444 0 0 0-477.184 186.965334 359.338667 359.338667 0 0 0-5.12 277.048888 359.964444 359.964444 0 0 0 192.227556 199.765334 362.496 362.496 0 0 0 477.184-186.965334A363.235556 363.235556 0 0 0 783.075556 271.36a32.113778 32.113778 0 0 1 25.969777-53.418667c8.533333 0.483556 16.497778 4.352 22.158223 10.695111 110.08 123.960889 138.353778 302.165333 71.964444 453.973334a423.68 423.68 0 0 1-235.264 226.389333A425.642667 425.642667 0 0 1 512 938.666667z" />
+  </svg>
+);
+export default PriceChangeIcon;

package/icon/assets/product-management.jsx

@@ -0,0 +1,8 @@
+const ProductManagementIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M486.883556 601.571556a38.257778 38.257778 0 0 0 48.924444 0l346.538667-219.932445a43.605333 43.605333 0 0 0 19.114666-38.229333 42.808889 42.808889 0 0 0-18.744889-38.257778l-348.046222-215.324444c-15.36-5.973333-32.426667-5.973333-47.786666 0L140.373333 304.384a38.229333 38.229333 0 0 0-19.143111 38.257778 54.698667 54.698667 0 0 0 18.773334 42.439111l346.88 216.462222zM201.927111 344.547556L512.113778 153.315556l310.186666 191.232-310.186666 191.232-310.186667-191.232z" />
+    <path d="M906.069333 506.737778a34.019556 34.019556 0 0 0-45.141333-12.231111l-326.627556 204.231111a44.003556 44.003556 0 0 1-45.880888 0l-321.649778-204.231111a38.257778 38.257778 0 0 0-44.373334 12.600889 23.722667 23.722667 0 0 0-6.883555 21.048888 27.562667 27.562667 0 0 0 13.368889 18.716445l354.56 221.070222a52.792889 52.792889 0 0 0 55.466666 0l354.901334-216.092444a33.649778 33.649778 0 0 0 12.231111-45.112889z" />
+    <path d="M855.580444 665.031111l-326.627555 203.861333a44.003556 44.003556 0 0 1-46.279111 0l-321.28-204.231111a38.229333 38.229333 0 0 0-27.136 0 29.838222 29.838222 0 0 0-17.976889 13.767111 38.229333 38.229333 0 0 0 0 27.164445c2.161778 7.196444 6.741333 13.397333 12.999111 17.578667l354.133333 220.302222a53.134222 53.134222 0 0 0 56.234667 0l348.814222-220.672a33.28 33.28 0 0 0 12.231111-45.141334 33.649778 33.649778 0 0 0-45.112889-12.600888z" />
+  </svg>
+);
+export default ProductManagementIcon;

package/icon/assets/redirect-portal.jsx

@@ -0,0 +1,17 @@
+const RedirectPortalIcon = () => (
+  <svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <g clipPath='url(#clip0_249_12351)'>
+      <path
+        d='M7.85672 2.14244V7.85672H2.14244V2.14244H7.85672ZM7.85672 0.713867H2.14244C1.35672 0.713867 0.713867 1.35672 0.713867 2.14244V7.85672C0.713867 8.64244 1.35672 9.2853 2.14244 9.2853H7.85672C8.64244 9.2853 9.2853 8.64244 9.2853 7.85672V2.14244C9.2853 1.35672 8.64244 0.713867 7.85672 0.713867ZM7.85672 12.1424V17.8567H2.14244V12.1424H7.85672ZM7.85672 10.7139H2.14244C1.35672 10.7139 0.713867 11.3567 0.713867 12.1424V17.8567C0.713867 18.6424 1.35672 19.2853 2.14244 19.2853H7.85672C8.64244 19.2853 9.2853 18.6424 9.2853 17.8567V12.1424C9.2853 11.3567 8.64244 10.7139 7.85672 10.7139ZM17.8567 2.14244V7.85672H12.1424V2.14244H17.8567ZM17.8567 0.713867H12.1424C11.3567 0.713867 10.7139 1.35672 10.7139 2.14244V7.85672C10.7139 8.64244 11.3567 9.2853 12.1424 9.2853H17.8567C18.6424 9.2853 19.2853 8.64244 19.2853 7.85672V2.14244C19.2853 1.35672 18.6424 0.713867 17.8567 0.713867ZM17.8567 12.1424V17.8567H12.1424V12.1424H17.8567ZM17.8567 10.7139H12.1424C11.3567 10.7139 10.7139 11.3567 10.7139 12.1424V17.8567C10.7139 18.6424 11.3567 19.2853 12.1424 19.2853H17.8567C18.6424 19.2853 19.2853 18.6424 19.2853 17.8567V12.1424C19.2853 11.3567 18.6424 10.7139 17.8567 10.7139Z'
+        fill='currentColor'
+      />
+    </g>
+    <defs>
+      <clipPath id='clip0_249_12351'>
+        <rect width='20' height='20' fill='currentColor' />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default RedirectPortalIcon;

package/icon/assets/system-setting.jsx

@@ -0,0 +1,7 @@
+const SystemSettingIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M933.76 465.066667a53.802667 53.802667 0 0 0-31.658667-41.130667l-75.52-33.28a62.848 62.848 0 0 1-37.248-64.426667l8.917334-82.048a53.76 53.76 0 0 0-19.882667-48.085333 426.624 426.624 0 0 0-110.72-64.085333 53.802667 53.802667 0 0 0-51.498667 6.784L549.290667 187.306667a62.933333 62.933333 0 0 1-74.581334 0l-66.56-48.853334a53.802667 53.802667 0 0 0-51.541333-6.826666A426.581333 426.581333 0 0 0 245.888 195.84a53.845333 53.845333 0 0 0-19.882667 48.085333l8.96 82.048a62.848 62.848 0 0 1-37.290666 64.426667l-75.776 33.578667a53.802667 53.802667 0 0 0-31.658667 41.258666 420.949333 420.949333 0 0 0 0 128 53.802667 53.802667 0 0 0 31.658667 41.002667l75.52 33.322667a62.805333 62.805333 0 0 1 37.248 64.384l-8.917334 82.56a53.845333 53.845333 0 0 0 19.925334 48.085333 425.728 425.728 0 0 0 110.677333 64.128 53.674667 53.674667 0 0 0 51.498667-6.826667l66.730666-48.853333a62.933333 62.933333 0 0 1 74.581334 0l66.730666 48.853333a53.76 53.76 0 0 0 51.498667 6.826667 425.728 425.728 0 0 0 110.677333-64.128 53.76 53.76 0 0 0 20.181334-48.085333l-8.96-82.048a62.848 62.848 0 0 1 37.290666-64.384l75.52-33.834667a53.717333 53.717333 0 0 0 31.658667-41.258667 420.864 420.864 0 0 0 0-128v0.128z m-74.666667 103.850666l-63.701333 28.032a139.904 139.904 0 0 0-82.901333 143.616l7.552 69.205334c-21.333333 15.872-44.458667 29.269333-68.864 39.893333l-56.32-41.216a139.818667 139.818667 0 0 0-165.76 0l-56.277334 41.216a347.178667 347.178667 0 0 1-68.864-39.893333l7.552-69.205334a139.946667 139.946667 0 0 0-82.901333-143.616l-63.701333-28.032a343.338667 343.338667 0 0 1 0-79.658666l63.701333-28.074667A139.946667 139.946667 0 0 0 311.466667 317.568l-7.552-69.162667a347.221333 347.221333 0 0 1 68.864-39.936l56.32 41.216a139.776 139.776 0 0 0 165.76 0l56.277333-41.216c24.405333 10.666667 47.488 24.021333 68.864 39.936l-7.552 69.162667a139.946667 139.946667 0 0 0 82.901333 143.616l63.701334 28.074667a343.466667 343.466667 0 0 1 0 79.658666z" />
+    <path d="M512.042667 386.048a143.061333 143.061333 0 1 0 0 286.122667 143.061333 143.061333 0 0 0 0-286.122667z m0 208.853333a65.792 65.792 0 1 1 0-131.626666 65.792 65.792 0 0 1 0 131.626666z" />
+  </svg>
+);
+export default SystemSettingIcon;

package/icon/assets/task.jsx

@@ -0,0 +1,7 @@
+const TaskIcon = () => (
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+    <path d="M816.753778 85.333333H207.246222A121.912889 121.912889 0 0 0 85.333333 207.246222v609.507556A121.912889 121.912889 0 0 0 207.246222 938.666667h609.507556A121.912889 121.912889 0 0 0 938.666667 816.753778V207.246222A121.912889 121.912889 0 0 0 816.753778 85.333333z m61.013333 731.591111a60.842667 60.842667 0 0 1-60.928 60.842667H207.36c-16.298667 0-31.687111-6.257778-43.235556-17.806222a60.501333 60.501333 0 0 1-17.92-43.036445V207.303111a61.184 61.184 0 0 1 61.155556-61.070222h609.450667a60.984889 60.984889 0 0 1 60.928 61.070222V816.924444z" />
+    <path d="M778.808889 359.537778h-243.854222a30.435556 30.435556 0 0 0 0 60.928h243.854222a30.435556 30.435556 0 0 0 0-60.899556z m0 243.968h-243.854222a30.435556 30.435556 0 0 0 0 60.928h243.854222a30.435556 30.435556 0 0 0 0-60.928zM352.085333 527.36a106.666667 106.666667 0 1 0 0 213.333333 106.666667 106.666667 0 0 0 0-213.333333z m32.369778 139.064889a45.767111 45.767111 0 1 1-64.682667-64.739556 45.767111 45.767111 0 0 1 64.682667 64.739556z m37.546667-358.684445l-100.408889 100.352L282.168889 368.64a30.435556 30.435556 0 0 0-43.064889 43.064889l60.956444 60.956444a30.435556 30.435556 0 0 0 43.064889 0l121.941334-121.912889a30.435556 30.435556 0 0 0-43.064889-43.064888z" />
+  </svg>
+);
+export default TaskIcon;

package/icon/index.js

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

package/icon/registry.js

@@ -34,6 +34,16 @@ var _shieldNoSignal = _interopRequireDefault(require("./assets/shield-no-signal"
 var _battery = _interopRequireDefault(require("./assets/battery"));
 var _folder = _interopRequireDefault(require("./assets/folder"));
 var _heartbeats = _interopRequireDefault(require("./assets/heartbeats"));
+var _announcement = _interopRequireDefault(require("./assets/announcement"));
+var _masterData = _interopRequireDefault(require("./assets/master-data"));
+var _systemSetting = _interopRequireDefault(require("./assets/system-setting"));
+var _certificate = _interopRequireDefault(require("./assets/certificate"));
+var _key = _interopRequireDefault(require("./assets/key"));
+var _task = _interopRequireDefault(require("./assets/task"));
+var _priceChange = _interopRequireDefault(require("./assets/price-change"));
+var _productManagement = _interopRequireDefault(require("./assets/product-management"));
+var _redirectPortal = _interopRequireDefault(require("./assets/redirect-portal"));
+var _info = _interopRequireDefault(require("./assets/info"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const iconOverrides = {
   merchant: _merchant.default,
@@ -65,6 +75,16 @@ const iconOverrides = {
   'shield-no-signal': _shieldNoSignal.default,
   battery: _battery.default,
   folder: _folder.default,
-  heartbeats: _heartbeats.default
+  heartbeats: _heartbeats.default,
+  announcement: _announcement.default,
+  'master-data': _masterData.default,
+  'system-setting': _systemSetting.default,
+  certificate: _certificate.default,
+  key: _key.default,
+  task: _task.default,
+  'price-change': _priceChange.default,
+  'product-management': _productManagement.default,
+  'redirect-portal': _redirectPortal.default,
+  info: _info.default
 };
 var _default = exports.default = iconOverrides;

package/iconbox/IconBox.js

@@ -4,13 +4,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _IconBoxFigure = _interopRequireDefault(require("./subComponent/IconBoxFigure"));
 var _IconBoxImage = _interopRequireDefault(require("./subComponent/IconBoxImage"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
+var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
 var _bgImageRegistry = _interopRequireDefault(require("./bgImageRegistry"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
+const withAlpha = (hex, alphaHex) => hex ? `${hex}${alphaHex}` : undefined;
 const IconBox = _ref => {
   let {
     icon,
@@ -21,10 +25,47 @@ const IconBox = _ref => {
     sizeXS = true,
     sizeS = false,
     size,
+    iconSize,
     bgImageKey,
     gradientFrom,
-    gradientTo
+    gradientTo,
+    colors
   } = _ref;
+  const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
+  const mode = colors ? theme?.cardMode || 'accent' : 'image';
+  if (mode === 'accent' || mode === 'gradient') {
+    const accent = colors.accent;
+    const gradientEnd = colors.gradient || accent;
+    const borderColor = colors.border || accent;
+    const circleSize = size || 60;
+    const innerIconSize = iconSize || Math.round(circleSize * 0.5);
+    const iconColorFinal = mode === 'gradient' ? '#FFFFFF' : accent;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AccentWrapper, {
+      mode: mode,
+      accent: accent,
+      gradientEnd: gradientEnd,
+      borderColor: borderColor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconCircle, {
+        mode: mode,
+        accent: accent,
+        circleSize: circleSize,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconBoxImage.default, {
+          size: innerIconSize,
+          iconKey: iconKey,
+          iconColor: iconColorFinal,
+          src: icon,
+          alt: `${title}'s icon`
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TextColumn, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxTitle, {
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBoxBody, {
+          accentColor: accent,
+          children: children
+        })]
+      })]
+    });
+  }
   const bgImage = bgImageKey && _bgImageRegistry.default[bgImageKey];
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, {
     bgImage: bgImage,
@@ -53,6 +94,9 @@ const IconBox = _ref => {
     })]
   });
 };
+
+/* ---------- image 模式（原始版式） ---------- */
+
 const Wrapper = _styledComponents.default.div`
   display: flex;
   flex-direction: column;
@@ -64,7 +108,8 @@ const Wrapper = _styledComponents.default.div`
   let {
     bgImage,
     gradientFrom,
-    gradientTo
+    gradientTo,
+    theme
   } = _ref2;
   if (bgImage || gradientFrom && gradientTo) {
     const gradient = gradientFrom && gradientTo ? `linear-gradient(135deg, ${gradientFrom}, ${gradientTo})` : 'var(--color-background2)';
@@ -76,9 +121,14 @@ const Wrapper = _styledComponents.default.div`
         background-size: cover;
       `;
   }
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
   return `
-      background: var(--color-background2);
-      background-image: url(${_bgChartTriangle.default});
+      background-color: rgba(255, 255, 255, 0.06);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      background-image: url(${marker.triangle});
       background-repeat: no-repeat;
       background-position: right bottom;
       background-size: 30% 70%;
@@ -90,14 +140,91 @@ const IconBoxHead = _styledComponents.default.div`
   align-items: center;
   margin-bottom: var(--spacing);
 `;
+
+/* ---------- accent / gradient 模式 ---------- */
+
+const AccentWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  padding: var(--spacing);
+  border-radius: var(--border-radius);
+  color: var(--font-on-background);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  ${_ref3 => {
+  let {
+    mode,
+    accent,
+    gradientEnd,
+    borderColor
+  } = _ref3;
+  if (mode === 'gradient') {
+    return `
+        background: linear-gradient(22deg, var(--color-background2) 0%, var(--color-background2) 40%, ${gradientEnd} 100%);
+        border: 2px solid ${borderColor};
+      `;
+  }
+  return `
+      background: ${withAlpha(accent, '0D')};
+      border: 2px solid ${withAlpha(accent, '1A')};
+    `;
+}}
+`;
+const IconCircle = _styledComponents.default.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: ${_ref4 => {
+  let {
+    circleSize
+  } = _ref4;
+  return `${circleSize}px`;
+}};
+  height: ${_ref5 => {
+  let {
+    circleSize
+  } = _ref5;
+  return `${circleSize}px`;
+}};
+  flex-shrink: 0;
+  margin-right: var(--spacing-s);
+  background: ${_ref6 => {
+  let {
+    mode,
+    accent
+  } = _ref6;
+  return mode === 'gradient' ? 'rgba(255, 255, 255, 0.2)' : withAlpha(accent, '14');
+}};
+`;
+const TextColumn = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+/* ---------- 共用 ---------- */
+
 const IconBoxTitle = _styledComponents.default.div`
   font-size: var(--font-h2);
   font-weight: bold;
+  line-height: 1.4;
   word-break: break-all;
 `;
 const IconBoxBody = _styledComponents.default.div`
   font-size: var(--font-h1);
   font-weight: bold;
-  text-align: center;
+  line-height: 1.3;
+  text-align: ${_ref7 => {
+  let {
+    accentColor
+  } = _ref7;
+  return accentColor ? 'left' : 'center';
+}};
+  color: ${_ref8 => {
+  let {
+    accentColor
+  } = _ref8;
+  return accentColor || 'inherit';
+}};
 `;
 var _default = exports.default = IconBox;

package/iconbox/bgImageRegistry.js

@@ -8,11 +8,13 @@ var _bgEnterprise = _interopRequireDefault(require("./assets/bg-enterprise.png")
 var _bgMerchant = _interopRequireDefault(require("./assets/bg-merchant.png"));
 var _bgTerminal = _interopRequireDefault(require("./assets/bg-terminal.png"));
 var _bgUser = _interopRequireDefault(require("./assets/bg-user.png"));
+var _bgAppManagement = _interopRequireDefault(require("./assets/bg-app-management.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const bgImageRegistry = {
   enterprise: _bgEnterprise.default,
   merchant: _bgMerchant.default,
   terminal: _bgTerminal.default,
-  user: _bgUser.default
+  user: _bgUser.default,
+  'app-management': _bgAppManagement.default
 };
 var _default = exports.default = bgImageRegistry;

package/iconbox/subComponent/IconBoxImage.js

@@ -69,7 +69,7 @@ const IconBoxImage = _ref6 => {
     ...rest
   } = _ref6;
   const theme = (0, _react.useContext)(_styledComponents.ThemeContext);
-  const override = theme?.useModernIcons && iconKey && _registry.default[iconKey];
+  const override = theme?.useModernCardIcons && iconKey && _registry.default[iconKey];
   const IconComponent = override || icon;
   const isComponent = typeof IconComponent === 'function';
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {

package/index.js

@@ -285,6 +285,18 @@ Object.keys(_heading).forEach(function (key) {
     }
   });
 });
+var _icon = require("./icon");
+Object.keys(_icon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _icon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _icon[key];
+    }
+  });
+});
 var _iconbox = require("./iconbox");
 Object.keys(_iconbox).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/layout/Aside.js

@@ -8,7 +8,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _header = _interopRequireDefault(require("../styles/config/header.style"));
 var _sidebar = _interopRequireDefault(require("../styles/config/sidebar.style"));
 var _media = _interopRequireDefault(require("../styles/mixin/media"));
-var _bgAside = _interopRequireDefault(require("../assets/images/bg-aside.png"));
+var _bgMainRegistry = _interopRequireDefault(require("./bgMainRegistry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
@@ -28,11 +28,30 @@ const Aside = _styledComponents.default.aside`
   if (theme?.hideAsideDecoration) {
     return `background: var(--color-background4);`;
   }
+  const bgKey = theme?.bgMainKey || 'default';
+  const bgImage = _bgMainRegistry.default[bgKey];
   return `
-      background: url(${_bgAside.default}), var(--color-background4);
-      background-size: 356px 436px, auto;
-      background-repeat: no-repeat, no-repeat;
-      background-position: bottom, center;
+      background: url(${bgImage});
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
+      background-attachment: fixed;
+      overflow: hidden;
+      position: relative;
+      z-index: 1;
+
+      &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+
+        background: var(--color-background4);
+        opacity: 0.9;
+
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+      }
     `;
 }}
   --font-on-background: var(--color-text-sidebar);

package/layout/AsideHeader.jsx

@@ -3,25 +3,21 @@ import headerStyle from '../styles/config/header.style';
 import media from '../styles/mixin/media';
 import Logo from './Logo';
 import MenuIcon from './MenuIcon';
-
-const AsideHeader = ({ theme, logo, hasSidebar, toggleSidebar }) => {
+const AsideHeader = ({ logo, hasSidebar, toggleSidebar }) => {
   return (
     <Brand>
-      {hasSidebar && <MenuIcon theme={theme} toggleSidebar={toggleSidebar} />}
-      {logo && <Logo src={logo} />}
+      {hasSidebar && <MenuIcon toggleSidebar={toggleSidebar} />}
+      {logo && <Logo srcColor={logo.color} srcWhite={logo.white} />}
     </Brand>
   );
 };
-
 const Brand = styled.div`
   display: none;
   height: ${headerStyle.height};
-
   ${media.tablet`
     padding: 0 var(--spacing-xs);
     align-items: center;
     display: flex
   `};
 `;
-
 export default AsideHeader;

package/layout/Footer.js

@@ -12,7 +12,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && {}.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; }
 const Footer = _styledComponents.default.footer`
   transition: 0.3s;
-  border-top: var(--border-width) solid var(--border-color);
+  border-top: none;
   color: var(--font-on-mute);
   height: 64px;
   line-height: 64px;

package/layout/Layout.jsx

@@ -6,6 +6,7 @@ import Container from './Container';
 import Footer from './Footer';
 import Sidebar from './Sidebar';
 import Backdrop from './Backdrop';
+
 const Layout = ({
   mode,
   logo,
@@ -18,12 +19,12 @@ const Layout = ({
   const toggleSidebar = () => {
     setDisplay(!display);
   };
-  // hide sidebar
   useEffect(() => {
     if (mode === 'tablet') {
       setDisplay(false);
     }
   }, [mode, setDisplay]);
+
   return (
     <Wrapper>
       <Header
@@ -56,14 +57,17 @@ const Layout = ({
     </Wrapper>
   );
 };
+
 const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 100vh;
 `;
+
 const Main = styled.div`
   display: flex;
   flex: 1;
   position: relative;
 `;
+
 export default Layout;

package/layout/Sidebar.jsx

@@ -203,6 +203,8 @@ const MenuItem = styled.li`
     props.active === true &&
     css`
       background: var(--color-active-sidebar);
+      border-top-right-radius: 10px;
+      border-bottom-right-radius: 10px;
     `};
 `;
 const MenuItemLink = styled(Link)`
@@ -244,12 +246,19 @@ const SubMenuItem = styled.li`
     padding: 0 calc(var(--spacing) * 2 + 1.5rem);
     padding-left: ${({ $level }) =>
       `calc(var(--spacing) * 2 + 1.5rem + ${$level} * var(--spacing))`};
-    height: 48px;
+    min-height: 48px;
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
     ${({ active }) =>
       active === true &&
       css`
         background: var(--color-active-sidebar);
+        border-top-right-radius: 10px;
+        border-bottom-right-radius: 10px;
       `};
+    span {
+      line-height: 1.4;
+    }
   }
 `;
 const EmptyIcon = styled.span`

package/layout/bgMainRegistry.js

@@ -6,9 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _bgMain = _interopRequireDefault(require("../assets/images/bg-main.png"));
 var _bgMainVivid = _interopRequireDefault(require("../assets/images/bg-main-vivid.png"));
+var _bgMainDark = _interopRequireDefault(require("../assets/images/bg-main-dark.png"));
+var _bgMainLight = _interopRequireDefault(require("../assets/images/bg-main-light.png"));
+var _bgMainWhite = _interopRequireDefault(require("../assets/images/bg-main-white.png"));
+var _bgMainMidnight = _interopRequireDefault(require("../assets/images/bg-main-midnight.png"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const bgMainRegistry = {
   default: _bgMain.default,
-  vivid: _bgMainVivid.default
+  vivid: _bgMainVivid.default,
+  dark: _bgMainDark.default,
+  light: _bgMainLight.default,
+  white: _bgMainWhite.default,
+  midnight: _bgMainMidnight.default
 };
 var _default = exports.default = bgMainRegistry;

package/layout/bgMarkerRegistry.jsx

@@ -0,0 +1,23 @@
+import bgMarkerCircleEmber from '../assets/images/bg-marker-circle-ember.png';
+import bgMarkerTriangleEmber from '../assets/images/bg-marker-triangle-ember.png';
+import bgMarkerCircleWhite from '../assets/images/bg-marker-circle-white.png';
+import bgMarkerTriangleWhite from '../assets/images/bg-marker-triangle-white.png';
+import bgMarkerCircleDark from '../assets/images/bg-marker-circle-dark.png';
+import bgMarkerTriangleDark from '../assets/images/bg-marker-triangle-dark.png';
+
+const bgMarkerRegistry = {
+  ember: {
+    circle: bgMarkerCircleEmber,
+    triangle: bgMarkerTriangleEmber,
+  },
+  white: {
+    circle: bgMarkerCircleWhite,
+    triangle: bgMarkerTriangleWhite,
+  },
+  dark: {
+    circle: bgMarkerCircleDark,
+    triangle: bgMarkerTriangleDark,
+  },
+};
+
+export default bgMarkerRegistry;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cashub/ui",
-  "version": "0.49.0-beta.1",
+  "version": "0.49.0-beta.11",
   "private": false,
   "author": "CasHUB Team",
   "description": "CasHUB UI components library",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/section/Section.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _bgChartTriangle = _interopRequireDefault(require("../assets/images/bg-chart-triangle.png"));
-var _bgChartCircle = _interopRequireDefault(require("../assets/images/bg-chart-circle.png"));
-var _map = _interopRequireDefault(require("../assets/images/map.png"));
+var _bgMarkerRegistry = _interopRequireDefault(require("../layout/bgMarkerRegistry"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Section = _styledComponents.default.div`
   background: var(--color-background1);
@@ -15,109 +13,112 @@ const Section = _styledComponents.default.div`
   color: var(--font-on-background);
   padding: var(--spacing);
   margin-bottom: var(--spacing);
-
   ${_ref => {
   let {
     backgroundReverse
   } = _ref;
-  return backgroundReverse && 'background: var(--color-background2);';
-}}
+  return backgroundReverse && `
+      position: relative;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
 
+      &::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background-color: rgba(255, 255, 255, 0.06);
+        backdrop-filter: blur(20px);
+        -webkit-backdrop-filter: blur(20px);
+        border-radius: inherit;
+        z-index: -1;
+        pointer-events: none;
+      }
+    `;
+}}
   ${_ref2 => {
   let {
     paddingS
   } = _ref2;
   return paddingS && 'padding: var(--spacing-s);';
 }}
-
   ${_ref3 => {
   let {
     paddingXS
   } = _ref3;
   return paddingXS && 'padding: var(--spacing-xs);';
 }}
-
   ${_ref4 => {
   let {
     noPadding
   } = _ref4;
   return noPadding && 'padding: 0;';
 }}
-
   ${_ref5 => {
   let {
-    noPaddingX
+    noPadding,
+    backgroundReverse,
+    backgroundMarker,
+    backgroundMap
   } = _ref5;
-  return noPaddingX && 'padding-left: 0; padding-right: 0;';
+  return noPadding && !backgroundReverse && !backgroundMarker && !backgroundMap && 'background: transparent;';
 }}
-
   ${_ref6 => {
   let {
-    noPaddingTop
+    noPaddingX
   } = _ref6;
-  return noPaddingTop && 'padding-top: 0;';
+  return noPaddingX && 'padding-left: 0; padding-right: 0;';
 }}
-
   ${_ref7 => {
   let {
-    noPaddingBottom
+    noPaddingTop
   } = _ref7;
-  return noPaddingBottom && 'padding-bottom: 0;';
+  return noPaddingTop && 'padding-top: 0;';
 }}
-
   ${_ref8 => {
   let {
-    marginBottomS
+    noPaddingBottom
   } = _ref8;
-  return marginBottomS && 'margin-bottom: var(--spacing-s);';
+  return noPaddingBottom && 'padding-bottom: 0;';
 }}
-
   ${_ref9 => {
   let {
-    noMarginBottom
+    marginBottomS
   } = _ref9;
-  return noMarginBottom && 'margin-bottom: 0;';
+  return marginBottomS && 'margin-bottom: var(--spacing-s);';
 }}
-
   ${_ref10 => {
   let {
-    fullHeight
+    noMarginBottom
   } = _ref10;
-  return fullHeight && 'height: calc(100% - var(--spacing));';
+  return noMarginBottom && 'margin-bottom: 0;';
 }}
-
   ${_ref11 => {
   let {
-    backgroundMarker
+    fullHeight
   } = _ref11;
-  return backgroundMarker && `
-      background: var(--color-background2);
-      background-image: url(${_bgChartCircle.default}), url(${_bgChartTriangle.default});
-      background-repeat: no-repeat;
-      background-position: left top, right bottom;
-      background-size: 337px 312px, 166px 225px;
-    `;
+  return fullHeight && 'height: calc(100% - var(--spacing));';
 }}
-
   ${_ref12 => {
   let {
-    backgroundMap
+    backgroundMarker,
+    backgroundMap,
+    theme
   } = _ref12;
-  return backgroundMap && `
-      background: var(--color-background2);
-      background-image: url(${_map.default});
+  if (!backgroundMarker && !backgroundMap) return '';
+  const markerKey = theme?.bgMarkerKey || 'ember';
+  const marker = _bgMarkerRegistry.default[markerKey] || _bgMarkerRegistry.default.ember;
+  return `
+      background-image: url(${marker.circle}), url(${marker.triangle});
       background-repeat: no-repeat;
-      background-size: cover;
+      background-position: left top, right bottom;
+      background-size: 337px 312px, 166px 225px;
     `;
 }}
-
   ${_ref13 => {
   let {
     border
   } = _ref13;
   return border && 'border: var(--border-width) solid var(--border-color);';
 }}
-  
   ${_ref14 => {
   let {
     checkboxGroup

package/select/Select.js

@@ -386,7 +386,7 @@ const Select = _ref => {
       setFocusedOption(null);
     }
     setDisplay(tmpDisplay);
-    update();
+    if (update) update();
   };
 
   // handle keyboard interaction

package/styles/theme/dark.theme.js

@@ -22,8 +22,12 @@ const colorStyle = {
   bgColor3: '#2d2a5d',
   bgColor4: '#222143',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'gradient',
+  bgMainKey: 'dark',
+  bgMarkerKey: 'dark',
+  useModernCardIcons: true,
   useLightBrand: true,
-  hideMainDecoration: true
+  hideMainDecoration: false
 };
 
 // Common font style

package/styles/theme/ember.theme.js

@@ -21,8 +21,11 @@ const colorStyle = {
   bgColor4: 'linear-gradient(90deg, #E62B27 0%, #D9211E 45%, #C60E27 100%)',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
   useModernIcons: true,
+  useModernCardIcons: true,
   useLightBrand: true,
-  bgMainKey: 'vivid',
+  cardMode: 'accent',
+  bgMainKey: 'default',
+  bgMarkerKey: 'ember',
   colorHoverSidebar: 'rgba(255, 255, 255, 0.15)',
   colorActiveSidebar: 'rgba(255, 255, 255, 0.22)',
   colorTextSidebar: '#FFFFFF',

package/styles/theme/light.theme.js

@@ -21,7 +21,9 @@ const colorStyle = {
   bgColor2: '#F8F4FF',
   bgColor3: '#E6E1FF',
   bgColor4: '#F8F4FF',
-  backdropBg: 'rgba(0, 0, 0, 0.75)'
+  backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'light'
 };
 
 // Common font style

package/styles/theme/midnight.theme.js

@@ -20,6 +20,8 @@ const colorStyle = {
   bgColor3: '#EDEFF3',
   bgColor4: '#00255B',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'midnight',
   useModernIcons: false,
   useLightBrand: true,
   colorHoverSidebar: 'rgba(255, 255, 255, 0.12)',

package/styles/theme/white.theme.js

@@ -22,10 +22,12 @@ const colorStyle = {
   bgColor3: '#FFFFFF',
   bgColor4: '#F7F7F7',
   backdropBg: 'rgba(0, 0, 0, 0.75)',
+  cardMode: 'accent',
+  bgMainKey: 'white',
+  bgMarkerKey: 'white',
   useModernIcons: false,
   useLightBrand: false,
-  hideMainDecoration: false,
-  bgMainKey: 'default'
+  hideMainDecoration: false
 };
 
 // Common font style

package/table/Table.js

@@ -44,7 +44,23 @@ const Table = _ref => {
     beforeCreateRow,
     popoverContainer,
     centerFooter = false,
-    showPager = true
+    showPager = true,
+    limitOptions = [{
+      id: 10,
+      text: '10'
+    }, {
+      id: 20,
+      text: '20'
+    }, {
+      id: 30,
+      text: '30'
+    }, {
+      id: 40,
+      text: '40'
+    }, {
+      id: 50,
+      text: '50'
+    }]
   } = _ref;
   const tableRef = (0, _react.useRef)(null);
   const {
@@ -304,22 +320,7 @@ const Table = _ref => {
           fill: true,
           fillReverse: backgroundReverse,
           allowSearch: false,
-          options: [{
-            id: 10,
-            text: '10'
-          }, {
-            id: 20,
-            text: '20'
-          }, {
-            id: 30,
-            text: '30'
-          }, {
-            id: 40,
-            text: '40'
-          }, {
-            id: 50,
-            text: '50'
-          }],
+          options: limitOptions,
           selected: limit,
           onSelect: onLimitChange
         })]

package/tooltip/Tooltip.js

@@ -40,15 +40,15 @@ const Tooltip = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   });
   const handleOpen = (0, _react.useCallback)(() => {
     setDisplay(true);
-    update();
+    if (update) update();
   }, [update]);
   const handleClose = (0, _react.useCallback)(() => {
     setDisplay(false);
-    update();
+    if (update) update();
   }, [update]);
   const toggle = (0, _react.useCallback)(() => {
     setDisplay(display => !display);
-    update();
+    if (update) update();
   }, [update]);
   const wraperProps = (0, _react.useMemo)(() => {
     if (disabled) return;