@woosmap/ui 3.10.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.10.0",
3
+ "version": "3.11.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
@@ -90,7 +90,10 @@ import { ReactComponent as Manage } from '../../icons/manage.svg';
90
90
  import { ReactComponent as Marker } from '../../icons/marker.svg';
91
91
  import { ReactComponent as Members } from '../../icons/members.svg';
92
92
  import { ReactComponent as Member } from '../../icons/member.svg';
93
- import { ReactComponent as Menu } from '../../icons/menu.svg';
93
+ import { ReactComponent as MenuVertical } from '../../icons/menu-vertical.svg';
94
+ import { ReactComponent as MenuCircleVertical } from '../../icons/menu-circle-vertical.svg';
95
+ import { ReactComponent as MenuHorizontal } from '../../icons/menu-horizontal.svg';
96
+ import { ReactComponent as MenuCircleHorizontal } from '../../icons/menu-circle-horizontal.svg';
94
97
  import { ReactComponent as Metrics } from '../../icons/metrics.svg';
95
98
  import { ReactComponent as Organization } from '../../icons/organization.svg';
96
99
  import { ReactComponent as Organizations } from '../../icons/organizations.svg';
@@ -128,6 +131,12 @@ import { ReactComponent as Map } from '../../icons/map.svg';
128
131
  import { ReactComponent as Merchant } from '../../icons/merchant.svg';
129
132
  import { ReactComponent as Stores } from '../../icons/stores.svg';
130
133
  import { ReactComponent as Traffic } from '../../icons/traffic.svg';
134
+ import { ReactComponent as Geofencing } from '../../icons/geofencing.svg';
135
+ import { ReactComponent as MultiSearch } from '../../icons/multisearch.svg';
136
+ import { ReactComponent as Mapping } from '../../icons/mapping.svg';
137
+ import { ReactComponent as Connectors } from '../../icons/connectors.svg';
138
+ import { ReactComponent as Showcases } from '../../icons/showcases.svg';
139
+
131
140
  import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.svg';
132
141
  import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
133
142
  import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
@@ -223,7 +232,10 @@ const Icons = {
223
232
  members: Members,
224
233
  member: Member,
225
234
  metrics: Metrics,
226
- menu: Menu,
235
+ 'menu-vertical': MenuVertical,
236
+ 'menu-circle-vertical': MenuCircleVertical,
237
+ 'menu-horizontal': MenuHorizontal,
238
+ 'menu-circle-horizontal': MenuCircleHorizontal,
227
239
  organization: Organization,
228
240
  organizations: Organizations,
229
241
  phone: Phone,
@@ -260,6 +272,11 @@ const Icons = {
260
272
  maps: Map,
261
273
  merchant: Merchant,
262
274
  traffic: Traffic,
275
+ geofencing: Geofencing,
276
+ multisearch: MultiSearch,
277
+ mapping: Mapping,
278
+ connectors: Connectors,
279
+ showcases: Showcases,
263
280
  'social-facebook': SocialFacebook,
264
281
  'social-linkedin': SocialLinkedin,
265
282
  'social-twitter': SocialTwitter,
@@ -58,11 +58,11 @@ function withLayer(MyComponent) {
58
58
  function close() {
59
59
  setOpen(false);
60
60
  }
61
- const { forwardedRef, container, placement, ...rest } = props;
61
+ const { forwardedRef, container, placement, disableClickOutside, ...rest } = props;
62
62
  const { renderLayer, triggerProps, layerProps, arrowProps } = useLayer({
63
63
  isOpen,
64
64
  container,
65
- onOutsideClick: close, // close the menu when the user clicks outside
65
+ onOutsideClick: disableClickOutside ? null : close, // close the menu when the user clicks outside
66
66
  onDisappear: close, // close the menu when the menu gets scrolled out of sight
67
67
  overflowContainer: true, // keep the menu positioned inside the container
68
68
  auto: true, // automatically find the best placement
@@ -87,11 +87,13 @@ function withLayer(MyComponent) {
87
87
  WrappedComponent.defaultProps = {
88
88
  container: null,
89
89
  placement: 'bottom-center',
90
+ disableClickOutside: false,
90
91
  };
91
92
  WrappedComponent.propTypes = {
92
93
  forwardedRef: PropTypes.object.isRequired,
93
94
  container: PropTypes.string,
94
95
  placement: PropTypes.string,
96
+ disableClickOutside: PropTypes.bool,
95
97
  };
96
98
  return React.forwardRef((props, ref) => <WrappedComponent {...props} forwardedRef={ref} />);
97
99
  }
@@ -3,6 +3,12 @@ import Popover from './Popover';
3
3
  import ConfirmationPopover from './ConfirmationPopover';
4
4
  import Button from '../Button/Button';
5
5
 
6
+ const toggle = (ref) => {
7
+ if (ref.current) {
8
+ ref.current.toggle();
9
+ }
10
+ };
11
+
6
12
  const Story = {
7
13
  title: 'base/Popover',
8
14
  component: Popover,
@@ -12,15 +18,10 @@ export default Story;
12
18
 
13
19
  const Template = () => {
14
20
  const popoverRef = React.createRef();
15
- function toggle() {
16
- if (popoverRef.current) {
17
- popoverRef.current.toggle();
18
- }
19
- }
20
21
  return (
21
22
  <div style={{ paddingLeft: '50px' }}>
22
23
  <Popover ref={popoverRef} content="My popover">
23
- <Button label="my button" onClick={toggle} />
24
+ <Button label="my button" onClick={() => toggle(popoverRef)} />
24
25
  </Popover>
25
26
  </div>
26
27
  );
@@ -34,15 +35,10 @@ const TemplateConfirmPopover = (args) => {
34
35
  const confirmCb = () => {
35
36
  // confirm action
36
37
  };
37
- function toggleConfirm() {
38
- if (popoverConfirmRef.current) {
39
- popoverConfirmRef.current.toggle();
40
- }
41
- }
42
38
  return (
43
39
  <div style={{ paddingLeft: '50px' }}>
44
40
  <ConfirmationPopover ref={popoverConfirmRef} text={text} confirmCb={confirmCb}>
45
- <Button label="my button" onClick={toggleConfirm} />
41
+ <Button label="my button" onClick={() => toggle(popoverConfirmRef)} />
46
42
  </ConfirmationPopover>
47
43
  </div>
48
44
  );
@@ -51,3 +47,16 @@ export const ConfirmationPopoverTemplate = TemplateConfirmPopover.bind({});
51
47
  ConfirmationPopoverTemplate.args = {
52
48
  text: 'Do you confirm?',
53
49
  };
50
+
51
+ const TemplatePopoverNoClickOutside = () => {
52
+ const popoverRef = React.createRef();
53
+
54
+ return (
55
+ <div style={{ paddingLeft: '50px' }}>
56
+ <Popover ref={popoverRef} content="My popover, no click outside" disableClickOutside>
57
+ <Button label="my button 2" onClick={() => toggle(popoverRef)} />
58
+ </Popover>
59
+ </div>
60
+ );
61
+ };
62
+ export const TemplatePopoverClickOutsideDisabled = TemplatePopoverNoClickOutside.bind({});
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M57.53 8.513H12.47a3.973 3.973 0 0 0-3.97 3.968v45.038a3.973 3.973 0 0 0 3.969 3.968H57.53a3.973 3.973 0 0 0 3.97-3.968V12.481a3.973 3.973 0 0 0-3.97-3.968Zm-21.53 2h21.53a1.971 1.971 0 0 1 1.97 1.968v21.51h-6.93a1 1 0 0 0-1 1 3.82 3.82 0 1 1-7.64 0 1 1 0 0 0-1-1H36v-6a5.821 5.821 0 0 0 0-11.468Zm-23.532 0H34v6.927a1 1 0 0 0 1 1 3.82 3.82 0 1 1 0 7.64 1 1 0 0 0-1 1v6.911h-6.016a5.821 5.821 0 0 0-11.468 0H10.5v-21.51a1.971 1.971 0 0 1 1.97-1.968ZM34 59.487H12.47a1.971 1.971 0 0 1-1.97-1.968v-21.51h6.93a1 1 0 0 0 1-1 3.82 3.82 0 1 1 7.64 0 1 1 0 0 0 1 1H34v6a5.82 5.82 0 0 0 0 11.468Zm23.532 0H36V52.56a1 1 0 0 0-1-1 3.82 3.82 0 1 1 0-7.64 1 1 0 0 0 1-1v-6.911h6.014a5.821 5.821 0 0 0 11.468 0H59.5v21.51a1.971 1.971 0 0 1-1.97 1.968Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M37.958 37.029a2 2 0 0 0 2.132 1.989 2.02 2.02 0 0 0 2.134-1.989c0-3.521 2.454-6.417 5.052-9.483 2.893-3.413 5.885-6.942 5.885-11.74a13.07 13.07 0 1 0-26.14 0c0 4.8 2.991 8.327 5.884 11.74 2.595 3.066 5.053 5.962 5.053 9.483Zm2.133-32.294a11.083 11.083 0 0 1 11.07 11.071c0 4.064-2.628 7.165-5.41 10.447-2.711 3.2-5.513 6.505-5.527 10.745a1.12 1.12 0 0 1-.256.012h-.01c-.008-4.246-2.814-7.557-5.527-10.758-2.783-3.282-5.41-6.383-5.41-10.447a11.083 11.083 0 0 1 11.07-11.07Z"/><path d="M40.09 21.876a5.847 5.847 0 1 0-5.847-5.847 5.854 5.854 0 0 0 5.847 5.847Zm0-9.694a3.847 3.847 0 1 1-3.847 3.847 3.851 3.851 0 0 1 3.847-3.847ZM57.294 23.661a1 1 0 0 0-1.627 1.162 19.129 19.129 0 0 1-15.576 30.261 19.242 19.242 0 0 1-5.113-.689c-.082-.023-.162-.05-.244-.074v-.043a13 13 0 0 0-12.986-12.989h-.044a19.1 19.1 0 0 1 2.81-16.468 1 1 0 0 0-1.627-1.162 21.022 21.022 0 0 0-3.2 17.808 12.98 12.98 0 1 0 14.867 14.881 21.133 21.133 0 0 0 22.74-32.687Zm-35.546 41.6a10.984 10.984 0 0 1-1.324-21.888.965.965 0 0 0 .993.206.971.971 0 0 0 .4-.29 10.986 10.986 0 0 1-.074 21.972Z"/><path d="M26 48.906a1 1 0 0 0-1.471 1.356c.48.52.994 1.024 1.527 1.5a1 1 0 1 0 1.328-1.494c-.484-.433-.946-.89-1.384-1.362ZM24.2 46.625a19.012 19.012 0 0 1-1-1.659 1 1 0 0 0-1.762.945 21.311 21.311 0 0 0 1.105 1.833 1 1 0 1 0 1.657-1.119ZM28.317 52.319a1 1 0 0 0 .3 1.383 21.272 21.272 0 0 0 1.853 1.07 1 1 0 1 0 .911-1.781 19.387 19.387 0 0 1-1.678-.969 1 1 0 0 0-1.386.297Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="m62.391 19.168-18-7.515-.026-.007a1.089 1.089 0 0 0-.124-.035 1.1 1.1 0 0 0-.114-.025.925.925 0 0 0-.118 0 1.06 1.06 0 0 0-.126 0c-.037 0-.072.016-.108.024a1.177 1.177 0 0 0-.129.036l-.025.007L26 19.008 8.38 11.653a1 1 0 0 0-1.38.923v37.333a1 1 0 0 0 .614.923l18 7.515c.013 0 .028 0 .041.008a.892.892 0 0 0 .688 0c.014 0 .028 0 .041-.008L44 50.992l17.62 7.355a1.013 1.013 0 0 0 .385.077 1 1 0 0 0 1-1V20.091a1 1 0 0 0-.614-.923Zm-53.4-5.091 16 6.68v35.166l-16-6.68Zm18 6.68 16-6.68v35.166l-16 6.68Zm34.014 35.166-16-6.68V14.077l16 6.68Z"/><path d="M35.3 31.748a5.505 5.505 0 0 0-5.505 5.5c0 3.956 4.989 6.055 4.989 9.681a.521.521 0 0 0 1.033 0c0-3.626 4.989-5.725 4.989-9.681a5.506 5.506 0 0 0-5.506-5.5Zm0 7.887a2.285 2.285 0 1 1 2.285-2.285 2.285 2.285 0 0 1-2.285 2.285ZM17 22.354a5.505 5.505 0 0 0-5.5 5.505c0 3.956 4.989 6.055 4.989 9.681a.521.521 0 0 0 1.033 0c0-3.626 4.989-5.725 4.989-9.681A5.506 5.506 0 0 0 17 22.354Zm0 7.887a2.285 2.285 0 1 1 2.285-2.284A2.285 2.285 0 0 1 17 30.241ZM53.576 37.215a.468.468 0 0 0 .517-.451c0-3.625 4.988-5.724 4.988-9.68a5.506 5.506 0 1 0-11.011 0c0 3.956 4.989 6.055 4.989 9.68a.465.465 0 0 0 .517.451Zm-2.285-10.034a2.285 2.285 0 1 1 2.285 2.284 2.285 2.285 0 0 1-2.285-2.284Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.994 12.081A1.984 1.984 0 0 1 6.762 14.1c-1.2.425-2.718.208-3.156-1.033C3.18 11.86 3.4 10.344 4.638 9.9c1.2-.426 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.148Zm-1.6.958c.589-.208.558-1.137.35-1.728a.691.691 0 0 0-.589-.452 2.2 2.2 0 0 0-1.139.1c-.589.209-.559 1.137-.35 1.728s1.136.559 1.728.35Zm7.9-.958a1.986 1.986 0 0 1-1.232 2.019c-1.2.425-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm-1.605.958c.588-.208.558-1.137.35-1.728s-1.136-.559-1.728-.35-.558 1.135-.35 1.728 1.136.559 1.728.35Zm7.905-.958a1.986 1.986 0 0 1-1.232 2.019c-1.2.426-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm-3.47-.183a2.467 2.467 0 0 0 .137.791.692.692 0 0 0 .589.452 2.2 2.2 0 0 0 1.139-.1c.589-.208.557-1.137.35-1.728s-1.136-.559-1.728-.35a.9.9 0 0 0-.487.937Z"/></svg>
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.919 7.994A1.984 1.984 0 0 1 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.156 1.2-.426 2.718-.209 3.157 1.032.426 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm-.958-1.6c.208.589 1.137.558 1.728.35a.691.691 0 0 0 .452-.589 2.2 2.2 0 0 0-.1-1.139c-.209-.589-1.137-.559-1.728-.35s-.559 1.136-.35 1.728zm.958 7.9A1.986 1.986 0 0 1 9.9 13.062c-.425-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm-.958-1.605c.208.588 1.137.558 1.728.35s.559-1.136.35-1.728-1.135-.558-1.728-.35-.559 1.136-.35 1.728zm.958 7.905A1.986 1.986 0 0 1 9.9 19.362c-.426-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199zm.183-3.47a2.467 2.467 0 0 0-.791.137.692.692 0 0 0-.452.589 2.2 2.2 0 0 0 .1 1.139c.208.589 1.137.557 1.728.35s.559-1.136.35-1.728a.9.9 0 0 0-.937-.487z"/></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.919 7.994A1.984 1.984 0 0 1 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.156 1.2-.426 2.718-.209 3.157 1.032.426 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm-.958-1.6c.208.589 1.137.558 1.728.35a.691.691 0 0 0 .452-.589 2.2 2.2 0 0 0-.1-1.139c-.209-.589-1.137-.559-1.728-.35s-.559 1.136-.35 1.728Zm.958 7.9A1.986 1.986 0 0 1 9.9 13.062c-.425-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm-.958-1.605c.208.588 1.137.558 1.728.35s.559-1.136.35-1.728-1.135-.558-1.728-.35-.559 1.136-.35 1.728Zm.958 7.905A1.986 1.986 0 0 1 9.9 19.362c-.426-1.2-.208-2.718 1.033-3.157 1.2-.426 2.718-.208 3.157 1.033.425 1.2.208 2.718-1.033 3.157a3.467 3.467 0 0 1-1.138.199Zm.183-3.47a2.467 2.467 0 0 0-.791.137.692.692 0 0 0-.452.589 2.2 2.2 0 0 0 .1 1.139c.208.589 1.137.557 1.728.35s.559-1.136.35-1.728a.9.9 0 0 0-.937-.487Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.994 12.081A1.984 1.984 0 0 1 6.762 14.1c-1.2.425-2.718.208-3.156-1.033C3.18 11.86 3.4 10.344 4.638 9.9c1.2-.426 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.148Zm6.3 0a1.986 1.986 0 0 1-1.232 2.019c-1.2.425-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Zm6.3 0a1.986 1.986 0 0 1-1.232 2.019c-1.2.426-2.718.208-3.157-1.033-.426-1.2-.208-2.718 1.033-3.157 1.2-.425 2.718-.208 3.157 1.033a3.467 3.467 0 0 1 .199 1.138Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.081 16.006a1.984 1.984 0 0 1 2.019 1.232c.425 1.2.208 2.718-1.033 3.156-1.2.426-2.718.209-3.157-1.032-.426-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.138-.199Zm0-6.3a1.986 1.986 0 0 1 2.019 1.232c.425 1.2.208 2.718-1.033 3.157-1.2.426-2.718.208-3.157-1.033-.425-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.138-.199Zm0-6.3A1.986 1.986 0 0 1 14.1 4.638c.426 1.2.208 2.718-1.033 3.157C11.86 8.221 10.344 8 9.9 6.762c-.425-1.2-.208-2.718 1.033-3.157a3.467 3.467 0 0 1 1.148-.199Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M45.051 45.188c-4.259 5.028-9.086 10.728-9.086 17.831 0 .68-.8.714-.965.714-.29 0-.965-.069-.965-.714 0-7.111-4.785-12.757-9.413-18.217-4.7-5.545-9.559-11.279-9.559-18.6a19.937 19.937 0 0 1 39.874 0 18.677 18.677 0 0 1-2.523 9.114 1 1 0 0 0 1.754.961A20.624 20.624 0 0 0 56.937 26.2a21.937 21.937 0 0 0-43.874 0c0 8.052 5.1 14.071 10.033 19.891 4.6 5.424 8.939 10.547 8.939 16.924A2.754 2.754 0 0 0 35 65.733a2.754 2.754 0 0 0 2.965-2.714c0-6.37 4.378-11.54 8.613-16.539a1 1 0 0 0-1.527-1.292Z"/><path d="M44.17 34.451a12.046 12.046 0 1 0-1.419 1.409l10.4 10.4a1 1 0 0 0 1.414-1.414ZM35 36.683a10.092 10.092 0 1 1 10.092-10.092A10.1 10.1 0 0 1 35 36.683Z"/><path d="M35 20.761a5.831 5.831 0 1 0 5.831 5.83A5.837 5.837 0 0 0 35 20.761Zm0 9.661a3.831 3.831 0 1 1 3.831-3.831A3.835 3.835 0 0 1 35 30.422Z"/></svg>
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70"><path d="M16.605 64.135A7.847 7.847 0 0 1 8.787 56.3L8.8 13.7a7.825 7.825 0 0 1 11.561-6.868l39.116 21.289a7.822 7.822 0 0 1 0 13.741l-39.13 21.31a7.813 7.813 0 0 1-3.742.963ZM10.787 56.3a5.821 5.821 0 0 0 8.6 5.114l39.131-21.31a5.824 5.824 0 0 0 0-10.229L19.405 8.588A5.825 5.825 0 0 0 10.8 13.7Z"/></svg>
@@ -303,3 +303,40 @@ $merchant10 = rgba(120, 144, 156, .1)
303
303
  $trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
304
304
  $traffic = rgba(255, 124, 129, 1) // #ff7c81
305
305
  $traffic10 = rgba(255, 124, 129, .1)
306
+
307
+
308
+ // Products
309
+
310
+ $stores = #388aff
311
+ $stores10 = rgba($stores, .1)
312
+ $storesDark = #0D63DD
313
+
314
+ $localities = #009DFF
315
+ $localities10 = rgba($localities, .1)
316
+ $localitiesDark = #0085D8
317
+
318
+ $geolocation = #506BDE
319
+ $geolocation10 = rgba($geolocation, .1)
320
+ $geolocationDark = #1F40CC
321
+
322
+ $address = #4AC6F2
323
+ $address10 = rgba($address, .1)
324
+ $addressDark = #0D9ED1
325
+
326
+ $distance = #FF8A65
327
+ $distance10 = rgba($distance, .1)
328
+ $distanceDark = #E06138
329
+
330
+ $traffic = #FF6565
331
+ $traffic10 = rgba($traffic, .1)
332
+ $trafficDark = #E04B4B
333
+
334
+ $map = #A1887F
335
+ $map10 = rgba($map, .1)
336
+ $mapDark = #906455
337
+
338
+ $merchant = #08A278
339
+ $merchant10 = rgba($merchant, .1)
340
+ $merchantDark = #008863
341
+
342
+