@zohodesk/library-platform 1.0.0-exp.1

package/src/library/dot/legacy-to-new-arch/avatar/frameworks/ui/Avatar.contract.md

@@ -0,0 +1,17 @@
+# Avatar Contract
+
+Avatar - Avatar
+
+| List V2  | External Reference | Available in Component | Description     |
+| -------- | ------------------ | ---------------------- | --------------- |
+| name     | userName           | Yes                    | User user name  |
+| imageSrc | imageSrc           | Yes                    | Image url       |
+| size     | size               | Yes                    | Avatar size     |
+| tooltip  | tooltipContent     | Yes                    | Tooltip text    |
+| label    | -                  | Yes                    | Image url       |
+| -        | presence           | Yes $                  | User's status   |
+| -        | hideTooltip        | Yes                    | Tooltip hide    |
+| -        | icon               | Yes $                  | Avatar Icon     |
+| -        | configAria         | Yes                    | Aria properties |
+
+> $ - As separate component

package/src/library/dot/legacy-to-new-arch/avatar/frameworks/ui/Avatar.tsx

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { AvatarProperties, AvatarActions } from "../../../../../../cc";
+import AvatarView from "./AvatarView";
+
+let Avatar = createCustomComponent({
+  name: "Avatar",
+  View: AvatarView,
+  properties: AvatarProperties,
+  actions: AvatarActions,
+  actionHandlers: {}
+});
+export default Avatar;

package/src/library/dot/legacy-to-new-arch/avatar/frameworks/ui/AvatarView.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import Avatar from "@zohodesk/components/es/Avatar/Avatar";
+import LabeledAvatar from "@zohodesk-private/desk-components/es/table/LabeledAvatar/LabeledAvatar";
+import { AvatarConstants } from "../../../../../../cc";
+
+// Have to tryout some better implementation to return components logic
+function AvatarView({ state, helpers }, ref) {
+  let { dispatch } = helpers;
+  let { name, imageSrc, size, label, tooltip } = state.properties;
+  
+
+  if(!!label) {
+    return <LabeledAvatar
+      $data_avatarUrl={imageSrc}
+      $data_text={label}
+      $data_avatarName={name}
+      $i18n_avatarTooltip={tooltip}
+      $customProps_container={{
+        ref,
+        onClick: () => {
+          dispatch({
+            type: AvatarConstants.AVATAR_CLICKED
+          });
+        }
+      }}
+    />
+  }
+
+  return (
+    <Avatar
+      customProps={{
+        AvatarProps: {
+          ref
+        }
+      }}
+      src={imageSrc}
+      name={name}
+      title={tooltip}
+      size={size}
+      onClick={() => {
+        dispatch({
+          type: AvatarConstants.AVATAR_CLICKED
+        });
+      }}
+    />
+  );
+
+}
+export default AvatarView;

package/src/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/Checkbox.contract.md

@@ -0,0 +1,21 @@
+# Checkbox Contract
+
+CheckBox - Checkbox
+
+| List V2  | External Reference | Available in Component | Description              |
+| -------- | ------------------ | ---------------------- | ------------------------ |
+| checked  | checked            | Yes                    | Checked state            |
+| disabled | disabled           | Yes                    | Disabled state           |
+| readonly | readonly           | Yes                    | Readonly state           |
+| label    | label              | Yes                    | Label text               |
+| tooltip  | -                  | Yes                    | Checkbox tooltip         |
+| -        | value              | No                     | String value of checked  |
+| -        | size               | Yes                    | Checkbox size            |
+| -        | name               | Yes                    | Checkbox name            |
+| -        | required           | No                     | Required handling        |
+| -        | manageChecked      | No                     | Local state need         |
+| -        | manageInvalid      | No                     | Local state need         |
+| -        | labelPosition      | No                     | Label position - 2 sides |
+| -        | invalid            | Yes                    | Error state              |
+| -        | fullWidth          | No                     | Block the link           |
+| -        | configAria         | Yes                    | Aria properties          |

package/src/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/Checkbox.tsx

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { CheckboxProperties, CheckboxActions } from "../../../../../../cc";
+import CheckboxView from "./CheckboxView";
+
+let Checkbox = createCustomComponent({
+  name: "Checkbox",
+  View: CheckboxView,
+  properties: CheckboxProperties,
+  actions: CheckboxActions,
+  actionHandlers: {}
+});
+export default Checkbox;

package/src/library/dot/legacy-to-new-arch/checkbox/frameworks/ui/CheckboxView.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import CheckBox from "@zohodesk/components/es/CheckBox/CheckBox";
+import { CheckboxConstants } from "../../../../../../cc";
+
+function CheckboxView({ state, helpers }, ref) {
+  let { dispatch } = helpers;
+  let { checked, disabled, readonly, label, tooltip } = state.properties;
+  return (
+    <CheckBox
+      getContainerRef={ref}
+      checked={checked}
+      disabled={disabled}
+      isReadOnly={readonly}
+      text={label}
+      title={tooltip}
+      disabledTitle={tooltip}
+      onChange={() => {
+        dispatch({
+          type: CheckboxConstants.CHECKBOX_TOGGLED
+        });
+      }}
+    />
+  );
+}
+export default CheckboxView;

package/src/library/dot/legacy-to-new-arch/common-empty-state/CommonEmptyState.ts

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import Properties from '@cc/empty-state/Properties';
+import CommonEmptyStateView from './CommonEmptyStateView';
+
+const CommonEmptyState = createCustomComponent({
+  name: 'CommonEmptyState',
+  View: CommonEmptyStateView,
+  properties: Properties,
+  events: [],
+  eventHandlers: {}
+});
+
+export default CommonEmptyState;

package/src/library/dot/legacy-to-new-arch/common-empty-state/CommonEmptyStateView.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import CommonEmptyState from '@zohodesk/dot/es/emptystate/CommonEmptyState/CommonEmptyState';
+import EmptyNoData from '@zohodesk/svg/es/v1/emptystate/version3/EmptyNoData';
+
+export default function CommonEmptyStateView({}, ref) {
+  return (
+    <span ref={ref}>
+      <CommonEmptyState getEmptyState={() => <EmptyNoData />} title='No Records!' description='There are no records to show here!' />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/email/frameworks/ui/Email.contract.md

@@ -0,0 +1,7 @@
+# Email Contract
+
+Email - X
+
+| List V2 | External Reference | Available in Component | Description |
+| ------- | ------------------ | ---------------------- | ----------- |
+| email   | -                  | Yes                    | Email text  |

package/src/library/dot/legacy-to-new-arch/email/frameworks/ui/Email.tsx

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { EmailProperties, EmailActions } from "../../../../../../cc";
+import EmailView from "./EmailView";
+
+let WrapEmail = createCustomComponent({
+  name: "Email",
+  View: EmailView,
+  properties: EmailProperties,
+  actions: EmailActions,
+  actionHandlers: {}
+});
+export default WrapEmail;

package/src/library/dot/legacy-to-new-arch/email/frameworks/ui/EmailView.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import TableEmail from "@zohodesk-private/desk-components/es/table/TableEmail/TableEmail";
+import { EmailConstants } from "../../../../../../cc";
+
+function EmailView({ state, helpers }, ref) {
+  let { dispatch } = helpers;
+  let { email } = state.properties;
+  return (
+    <span ref={ref}>
+    <TableEmail
+      $method_getRef={ref}
+      $event_onCopyEmailClick={(mail: string) => {
+        dispatch({
+          type: EmailConstants.EMAIL_COPIED,
+          payload: {
+            email: mail
+          }
+        });
+      }}
+      $data_email={email}
+    />
+    </span>
+  );
+}
+export default EmailView;

package/src/library/dot/legacy-to-new-arch/field-components/checkbox-field/frameworks/ui/CheckboxField.tsx

@@ -0,0 +1,15 @@
+import { createCustomComponent } from '@library/custom-component';
+
+import BooleanProperties from '@cc/fields/boolean/Properties';
+import BooleanEvents from '@cc/fields/boolean/Events';
+import CheckboxFieldView from './CheckboxFieldView';
+import { EventHandlersFactory } from './EventHandlersFactory';
+
+const CheckboxField = createCustomComponent({
+  name: 'CheckboxField',
+  View: CheckboxFieldView,
+  properties: BooleanProperties,
+  events: BooleanEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default CheckboxField;

package/src/library/dot/legacy-to-new-arch/field-components/checkbox-field/frameworks/ui/CheckboxFieldView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Checkbox } from '@library/dot/legacy-to-new-arch';
+
+export default function CheckboxFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+
+  return (
+    <span ref={ref}>
+      <Checkbox checked={value} disabled={false} readonly={false} label='' tooltip='' />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/checkbox-field/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,24 @@
+import EventHandlers, { EventHandler, EventHandlerParams } from '@cc/component/EventHandlers';
+import CheckboxConstants from '@cc/checkbox/Constants';
+import FieldConstants from '@cc/fields/field/Constants';
+export class EventHandlersFactory {
+  static create(): EventHandlers {
+    const changeHandler: EventHandler = (input: EventHandlerParams) => {
+      const { state, dispatch } = input;
+      const { name: fieldName, value: currentValue } = state.properties;
+      const toggledValue = !currentValue;
+
+      dispatch({
+        type: FieldConstants.FIELD_CHANGED,
+        payload: {
+          fieldName,
+          value: toggledValue
+        }
+      });
+    };
+
+    return {
+      [CheckboxConstants.CHECKBOX_TOGGLED]: changeHandler
+    };
+  }
+}

package/src/library/dot/legacy-to-new-arch/field-components/email-field/frameworks/ui/EmailField.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import EmailProperties from '@cc/fields/email/Properties';
+
+import { EmailFieldView } from './EmailFieldView';
+
+const EmailField = createCustomComponent({
+  name: 'EmailField',
+  View: EmailFieldView,
+  properties: EmailProperties,
+  actions: [],
+  actionHandlers: {}
+});
+export default EmailField;

package/src/library/dot/legacy-to-new-arch/field-components/email-field/frameworks/ui/EmailFieldView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Email } from '@library/dot/legacy-to-new-arch';
+
+export function EmailFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+
+  return (
+    <span ref={ref}>
+      <Email email={value} />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/index.ts

@@ -0,0 +1,16 @@
+export { default as CheckboxField } from './checkbox-field/frameworks/ui/CheckboxField';
+export { default as SwitchField } from './switch-field/frameworks/ui/SwitchField';
+export { default as SingleLineField } from './text-field/frameworks/ui/TextField';
+export { default as EmailField } from './email-field/frameworks/ui/EmailField';
+export { default as URLField } from './url-field/frameworks/ui/UrlField';
+export { default as PhoneField } from './phone-field/frameworks/ui/PhoneField';
+export { default as CurrencyField } from './text-field/frameworks/ui/TextField';
+export { default as LookUpField } from './lookup-field/frameworks/ui/LookupField';
+export { default as PickListField } from './text-field/frameworks/ui/TextField';
+export { default as PercentageField } from './text-field/frameworks/ui/TextField';
+export { default as DateField } from './text-field/frameworks/ui/TextField';
+export { default as DateTimeField } from './text-field/frameworks/ui/TextField';
+export { default as MultiSelectField } from './multiselect-field/frameworks/ui/MultiSelectField';
+// export { default as DateTimeField } from './date-time-field/frameworks/ui/DateTimeField';
+// export { default as ColoredPickListField } from './colored-picklist-field/frameworks/ui/ColoredPickListField';
+// export { default as ColoredMultiSelectField } from './colored-multi-select-field/frameworks/ui/ColoredMultiSelectField';

package/src/library/dot/legacy-to-new-arch/field-components/lookup-field/frameworks/ui/LookupField.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import LookupProperties from '@cc/fields/lookup/Properties';
+
+import { LookupFieldView } from './LookupFieldView';
+
+const LookupField = createCustomComponent({
+  name: 'LookupField',
+  View: LookupFieldView,
+  properties: LookupProperties,
+  actions: [],
+  actionHandlers: {}
+});
+export default LookupField;

package/src/library/dot/legacy-to-new-arch/field-components/lookup-field/frameworks/ui/LookupFieldView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Avatar } from '@library/dot/legacy-to-new-arch';
+
+export function LookupFieldView({ state, helpers }, ref) {
+  const { name, photoURL } = state.properties.value;
+
+  return (
+    <span ref={ref}>
+      <Avatar name={name} label={name} imageSrc={photoURL} tooltip='' />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/multiselect-field/frameworks/ui/MultiSelectField.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import MultiSelectProperties from '@cc/fields/multi-select/Properties';
+
+import { MultiSelectFieldView } from './MultiSelectFieldView';
+
+const MultiSelectField = createCustomComponent({
+  name: 'MultiSelectField',
+  View: MultiSelectFieldView,
+  properties: MultiSelectProperties,
+  actions: [],
+  actionHandlers: {}
+});
+export default MultiSelectField;

package/src/library/dot/legacy-to-new-arch/field-components/multiselect-field/frameworks/ui/MultiSelectFieldView.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tags } from '@library/dot/legacy-to-new-arch';
+
+export function MultiSelectFieldView({ state, helpers }, ref) {
+  const { value, options } = state.properties;
+
+  // const selectedOptions = options.find(option => value.includes(option.value));
+  const selectedOptions = value.map((item) => ({id: item, label: item}));
+
+  return (
+    <span ref={ref}>
+      <Tags tags={selectedOptions} />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/phone-field/frameworks/ui/PhoneField.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import UrlProperties from '@cc/fields/url/Properties';
+
+import PhoneFieldView from './PhoneFieldView';
+
+const PhoneField = createCustomComponent({
+  name: 'PhoneField',
+  View: PhoneFieldView,
+  properties: UrlProperties,
+  actions: [],
+  actionHandlers: {}
+});
+export default PhoneField;

package/src/library/dot/legacy-to-new-arch/field-components/phone-field/frameworks/ui/PhoneFieldView.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Link } from '@library/dot/legacy-to-new-arch';
+
+function PhoneFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+  const href = `tel:${value}`;
+
+  return (
+    <span ref={ref}>
+      <Link label={value} href={href} variant='secondary' opensNewTab />
+    </span>
+  );
+}
+
+export default PhoneFieldView;

package/src/library/dot/legacy-to-new-arch/field-components/picklist-field/frameworks/ui/PickListField.tsx

@@ -0,0 +1,13 @@
+import { createCustomComponent } from '@library/custom-component';
+import PickListProperties from '@cc/fields/pick-list/Properties';
+
+import { PickListFieldView } from './PickListFieldView';
+
+const PickListField = createCustomComponent({
+  name: 'PickListField',
+  View: PickListFieldView,
+  properties: PickListProperties,
+  actions: [],
+  actionHandlers: {}
+});
+export default PickListField;

package/src/library/dot/legacy-to-new-arch/field-components/picklist-field/frameworks/ui/PickListFieldView.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { HighlightedValue } from '@library/dot/legacy-to-new-arch';
+
+export function PickListFieldView({ state, helpers }, ref) {
+  const { value, options } = state.properties;
+
+  const selectedOptions = options.find(option => value === option.value);
+
+  return (
+    <span ref={ref}>
+      <HighlightedValue text={value} color={selectedOptions?.colorCode} tooltip='' />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/switch-field/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,25 @@
+import EventHandlers, { EventHandler, EventHandlerParams } from '@cc/component/EventHandlers';
+import SwitchConstants from '@cc/switch/Constants';
+import FieldConstants from '@cc/fields/field/Constants';
+
+export class EventHandlersFactory {
+  static create(): EventHandlers {
+    const changeHandler: EventHandler = (input: EventHandlerParams) => {
+      const { state, dispatch } = input;
+      const { name: fieldName, value: currentValue } = state.properties;
+      const toggledValue = !currentValue;
+
+      dispatch({
+        type: FieldConstants.FIELD_CHANGED,
+        payload: {
+          fieldName,
+          value: toggledValue
+        }
+      });
+    };
+
+    return {
+      [SwitchConstants.SWITCH_TOGGLED]: changeHandler
+    };
+  }
+}

package/src/library/dot/legacy-to-new-arch/field-components/switch-field/frameworks/ui/SwitchField.tsx

@@ -0,0 +1,15 @@
+import { createCustomComponent } from '@library/custom-component';
+
+import BooleanProperties from '@cc/fields/boolean/Properties';
+import BooleanEvents from '@cc/fields/boolean/Events';
+import SwitchFieldView from './SwitchFieldView';
+import { EventHandlersFactory } from './EventHandlersFactory';
+
+const SwitchField = createCustomComponent({
+  name: 'SwitchField',
+  View: SwitchFieldView,
+  properties: BooleanProperties,
+  events: BooleanEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default SwitchField;

package/src/library/dot/legacy-to-new-arch/field-components/switch-field/frameworks/ui/SwitchFieldView.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Switch } from '@library/dot/legacy-to-new-arch';
+
+export default function SwitchFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+
+  return <span ref={ref}><Switch checked={value} disabled={false} size={'small'} tooltip='' /></span>;
+}

package/src/library/dot/legacy-to-new-arch/field-components/text-field/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,23 @@
+import EventHandlers, { EventHandler, EventHandlerParams } from '@cc/component/EventHandlers';
+import TextConstants from '@cc/text/Constants';
+import FieldConstants from '@cc/fields/field/Constants';
+
+export class EventHandlersFactory {
+  static create(): EventHandlers {
+    const clickHandler: EventHandler = (input: EventHandlerParams) => {
+      const { state, dispatch } = input;
+      const { name: fieldName } = state.properties;
+
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [TextConstants.TEXT_CLICKED]: clickHandler
+    };
+  }
+}

package/src/library/dot/legacy-to-new-arch/field-components/text-field/frameworks/ui/TextField.tsx

@@ -0,0 +1,15 @@
+import { createCustomComponent } from '@library/custom-component';
+import TextProperties from '@cc/fields/text/Properties';
+import TextEvents from '@cc/fields/text/Events';
+
+import { TextFieldView } from './TextFieldView';
+import { EventHandlersFactory } from './EventHandlersFactory';
+
+const TextField = createCustomComponent({
+  name: 'TextField',
+  View: TextFieldView,
+  properties: TextProperties,
+  events: TextEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default TextField;

package/src/library/dot/legacy-to-new-arch/field-components/text-field/frameworks/ui/TextFieldView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text } from '@library/dot/legacy-to-new-arch';
+
+export function TextFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+
+  return (
+    <span ref={ref}>
+      <Text text={value} tooltip='' />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/field-components/url-field/frameworks/ui/EventHandlersFactory.ts

@@ -0,0 +1,23 @@
+import EventHandlers, { EventHandler, EventHandlerParams } from '@cc/component/EventHandlers';
+import LinkConstants from '@cc/link/Constants';
+import FieldConstants from '@cc/fields/field/Constants';
+
+export class EventHandlersFactory {
+  static create(): EventHandlers {
+    const clickHandler: EventHandler = (input: EventHandlerParams) => {
+      const { state, dispatch } = input;
+      const { name: fieldName } = state.properties;
+
+      dispatch({
+        type: FieldConstants.FIELD_CLICKED,
+        payload: {
+          fieldName
+        }
+      });
+    };
+
+    return {
+      [LinkConstants.LINK_CLICKED]: clickHandler
+    };
+  }
+}

package/src/library/dot/legacy-to-new-arch/field-components/url-field/frameworks/ui/UrlField.tsx

@@ -0,0 +1,15 @@
+import { createCustomComponent } from '@library/custom-component';
+import UrlProperties from '@cc/fields/url/Properties';
+import UrlEvents from '@cc/fields/url/Events';
+
+import { UrlFieldView } from './UrlFieldView';
+import { EventHandlersFactory } from './EventHandlersFactory';
+
+const UrlField = createCustomComponent({
+  name: 'UrlField',
+  View: UrlFieldView,
+  properties: UrlProperties,
+  events: UrlEvents,
+  eventHandlers: EventHandlersFactory.create()
+});
+export default UrlField;

package/src/library/dot/legacy-to-new-arch/field-components/url-field/frameworks/ui/UrlFieldView.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from '@library/dot/legacy-to-new-arch';
+
+export function UrlFieldView({ state, helpers }, ref) {
+  const { value } = state.properties;
+
+  return (
+    <span ref={ref}>
+      <Link label={value} href={value} variant='secondary' opensNewTab />
+    </span>
+  );
+}

package/src/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue.contract.md

@@ -0,0 +1,12 @@
+# Highlighted Value Contract
+
+HighlightedValue - Highlighted Value
+
+| List V2 | External Reference | Available in Component | Description      |
+| ------- | ------------------ | ---------------------- | ---------------- |
+| text    | label              | Yes                    | Text that show   |
+| color   | color              | Yes                    | Palette color    |
+| tooltip | -                  | Yes                    | Tooltip text     |
+| -       | icon               | No                     | Icon before text |
+| -       | showIcon           | No                     | Icon show state  |
+| -       | variant            | No                     | Shades of color  |

package/src/library/dot/legacy-to-new-arch/highlighted-value/frameworks/ui/HighlightedValue.tsx

@@ -0,0 +1,12 @@
+import { createCustomComponent } from "../../../../../custom-component";
+import { HighlightedValueProperties, HighlightedValueActions } from "../../../../../../cc";
+import HighlightedValueView from "./HighlightedValueView";
+
+let HighlightedValue = createCustomComponent({
+  name: "HighlightedValue",
+  View: HighlightedValueView,
+  properties: HighlightedValueProperties,
+  actions: HighlightedValueActions,
+  actionHandlers: {}
+});
+export default HighlightedValue;