@zohodesk/components 1.0.0-temp-199.21 → 1.0.0-temp-249

package/README.md

@@ -4,6 +4,18 @@ Dot UI is a customizable React component library built to deliver a clean, acces
 
 # 1.5.8
 
+- **Label Component - v1**
+  - The label component of v1 has been updated with accessibility enhancements and few props have been renamed and restructured to align better with accessibility guidelines
+    - Mandatory field accessibility has been improved by allowing the mandatory indicator type (asterisk or text) to be handled via user preferences.
+    - Explicit boolean props are introduced: isRequired, isDisabled, isReadOnly - These replace earlier state handling that was implicitly managed through the palette prop.
+    - Custom Class Structure has been updated to provide separate styling control : Label element, Container wrapper
+    - The variant prop has been replaced with textWeight to clearly define typography styling (regular / semibold).
+    - The dataId has been replaced with testId, customId
+
+  - These updates have been applied across all form labels using Label v1
+
+# 1.5.8
+
 - Memoized **Portal** logic to improve performance.
 
 # 1.5.7

package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(217, 13.73%, calc(70.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/light/mode/Component_v1_LightMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(0, 0.00%, calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(220, 10.45%, calc(39.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css

@@ -8,4 +8,10 @@
 	--zdt_v1_switch_onLabel: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_v1_switch_offLabel: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_v1_switch_offLabel_hover: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* label */
+	--zdt_v1_label_text: hsla(210, 7.41%, calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_v1_label_required_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_v1_label_disabled_text: var(--dot_inputDisable);
+	--zdt_v1_label_secondary_text: hsla(0, 0.00%, calc(60.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 }

package/es/ListItem/ListItem.module.css

@@ -1,4 +1,3 @@
-/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -16,14 +15,9 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-
-  /* multiLine value for list item */
-  --listitem_multiline_lineheight: 1.5385;
-}
-[dir=ltr] .varClass {
+}[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}
-[dir=rtl] .varClass {
+}[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -82,9 +76,8 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
-  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: var(--listitem_multiline_lineheight);
+  line-height: 1.5385;
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -122,18 +115,26 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
-.contentWrapper {
-  composes: dflex flexrow alignVertical from '../common/common.module.css';
-  width: 100% ;
-}
 .lhsBox {
   composes: dflex from '../common/common.module.css';
   align-self: stretch;
 }
-.lhsBoxInner{
-  composes: dflex alignVertical from '../common/common.module.css';
+.lhsBox_small,
+.lhsBox_medium,
+.lhsBox_large{
+  composes: varClass;
+  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
   height: 100% ;
-  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
+  composes: dflex alignVertical from '../common/common.module.css';
+}
+.lhsBox_small {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_medium {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
+}
+.lhsBox_large {
+  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);

package/es/ListItem/ListItemWithAvatar.js

@@ -124,13 +124,11 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: style.lhsBoxInner
+      className: style[`lhsBox_${size}`]
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -176,7 +174,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -100,14 +100,12 @@ export default class ListItemWithCheckBox extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -132,7 +130,7 @@ export default class ListItemWithCheckBox extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)));
+    }, secondaryValue) : null));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -116,8 +116,6 @@ export default class ListItemWithIcon extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       align: lhsAlignContent,
@@ -125,7 +123,7 @@ export default class ListItemWithIcon extends React.Component {
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -156,7 +154,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null));
+    })) : null);
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -101,15 +101,13 @@ export default class ListItemWithRadio extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
-    }, /*#__PURE__*/React.createElement(Box, {
-      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
+      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -135,7 +133,7 @@ export default class ListItemWithRadio extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null)));
+    }, secondaryValue) : null));
   }
 
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,12 +889,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit,
-      customProps
+      limit
     } = this.props;
-    const {
-      SuggestionsProps = {}
-    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1063,7 +1059,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
+        })), /*#__PURE__*/React.createElement(Suggestions, {
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
-      limit,
-      customProps
+      limit
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,23 +193,18 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction,
-      customClass
+      setVirtualizerContainerRefFunction
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
-    const {
-      containerClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable,
-      className: containerClass
+      "aria-multiselectable": ariaMultiselectable
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/MultiSelect/props/defaultProps.js

@@ -38,7 +38,6 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
-  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -170,6 +169,5 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
-  customClass: {},
   needMultiLineText: false
 };

package/es/MultiSelect/props/propTypes.js

@@ -114,8 +114,7 @@ export const MultiSelect_propTypes = {
   setAriaId: PropTypes.string,
   ariaErrorId: PropTypes.string,
   customProps: PropTypes.shape({
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
@@ -200,11 +199,7 @@ export const Suggestions_propTypes = {
   })),
   renderBeforeChildren: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
   limit: PropTypes.number,
-  limitReachedMessage: PropTypes.string,
-  customClass: PropTypes.shape({
-    containerClass: PropTypes.string
-  }),
-  needMultiLineText: PropTypes.bool
+  limitReachedMessage: PropTypes.string
 };
 export const AdvancedGroupMultiSelect_propTypes = {
   animationStyle: PropTypes.string,
@@ -278,10 +273,7 @@ export const AdvancedGroupMultiSelect_propTypes = {
   dataSelectorId: PropTypes.string,
   isFocus: PropTypes.bool,
   allowValueFallback: PropTypes.bool,
-  limit: PropTypes.number,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  limit: PropTypes.number
 };
 export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   selectedOptionDetails: PropTypes.string,

package/es/Provider/LibraryContext.js

@@ -11,6 +11,8 @@ const LibraryContextProvider = _ref => {
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
     shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
@@ -19,7 +21,9 @@ const LibraryContextProvider = _ref => {
     coloredTagVariant,
     hasTagColorInheritedToText,
     shouldIndicateSwitchState,
-    shouldStrikeThroughDisabledButton
+    shouldStrikeThroughDisabledButton,
+    labelRequiredType,
+    shouldHighlightRequiredLabel
   });
 
   function setGlobalContext(key, data) {
@@ -44,7 +48,9 @@ LibraryContextProvider.propTypes = {
   hasTagColorInheritedToText: PropTypes.bool,
   direction: PropTypes.string,
   shouldIndicateSwitchState: PropTypes.bool,
-  shouldStrikeThroughDisabledButton: PropTypes.bool
+  shouldStrikeThroughDisabledButton: PropTypes.bool,
+  labelRequiredType: PropTypes.oneOf(['asterisk', 'text']),
+  shouldHighlightRequiredLabel: PropTypes.bool
 };
 LibraryContextProvider.defaultProps = {
   isReducedMotion: getLibraryConfig('isReducedMotion'),
@@ -52,6 +58,8 @@ LibraryContextProvider.defaultProps = {
   coloredTagVariant: 'bold',
   hasTagColorInheritedToText: true,
   shouldIndicateSwitchState: false,
-  shouldStrikeThroughDisabledButton: false
+  shouldStrikeThroughDisabledButton: false,
+  labelRequiredType: 'asterisk',
+  shouldHighlightRequiredLabel: true
 };
 export default LibraryContextProvider;

package/es/Select/GroupSelect.js

@@ -623,7 +623,7 @@ export class GroupSelectComponent extends PureComponent {
     let {
       TextBoxIconProps = {},
       TextBoxProps = {},
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,

package/es/Select/SelectWithAvatar.js

@@ -169,8 +169,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       needEffect,
       isLoading,
       dataSelectorId,
-      getTargetRef,
-      customProps
+      customProps,
+      getTargetRef
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -195,7 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     let {
       TextBoxProps,
       DropdownSearchTextBoxProps,
-      SuggestionsProps = {}
+      SuggestionsProps
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,

package/es/Select/SelectWithIcon.js

@@ -357,8 +357,7 @@ class SelectWithIcon extends Component {
       htmlId,
       isLoading,
       dataSelectorId,
-      customProps,
-      customClass
+      customProps
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -376,11 +375,8 @@ class SelectWithIcon extends Component {
       TextBoxProps = {},
       DropdownSearchTextBoxProps = {},
       TextBoxIconProps = {},
-      ListItemProps = {}
+      ListItemProps
     } = customProps;
-    const {
-      dropBoxClass = ''
-    } = customClass;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
       "data-title": isDisabled ? title : null,
@@ -477,10 +473,7 @@ class SelectWithIcon extends Component {
         size: boxSize,
         isPadding: false,
         isResponsivePadding: true,
-        alignBox: "row",
-        customClass: {
-          customDropBox: dropBoxClass
-        }
+        alignBox: "row"
       }, isLoading ? /*#__PURE__*/React.createElement(Container, {
         align: "both",
         className: style.loader

package/es/Select/props/defaultProps.js

@@ -102,8 +102,7 @@ export const SelectWithAvatar_defaultProps = {
   i18nKeys: {},
   customProps: {},
   needEffect: true,
-  isLoading: false,
-  customProps: {}
+  isLoading: false
 };
 export const SelectWithIcon_defaultProps = {
   isReadOnly: false,
@@ -132,6 +131,5 @@ export const SelectWithIcon_defaultProps = {
   isLoading: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customProps: {},
-  customClass: {}
+  customProps: {}
 };

package/es/Select/props/propTypes.js

@@ -186,8 +186,7 @@ export const GroupSelect_propTypes = {
   isDefaultSelectValue: PropTypes.bool,
   customProps: PropTypes.shape({
     TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
+    TextBoxIconProps: PropTypes.object
   }),
   allowValueFallback: PropTypes.bool
 };
@@ -250,10 +249,7 @@ export const SelectWithAvatar_propTypes = { ...Select_propTypes,
   htmlId: PropTypes.string,
   needEffect: PropTypes.bool,
   isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object
-  })
+  dataSelectorId: PropTypes.string
 };
 export const SelectWithIcon_propTypes = {
   animationStyle: PropTypes.oneOf(['default', 'bounce']),
@@ -318,10 +314,6 @@ export const SelectWithIcon_propTypes = {
     TextBoxProps: PropTypes.object,
     DropdownSearchTextBoxProps: PropTypes.object,
     SuggestionsProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    ListItemProps: PropTypes.object
-  }),
-  customClass: PropTypes.shape({
-    dropBoxClass: PropTypes.string
+    TextBoxIconProps: PropTypes.object
   })
 };

package/es/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/es/v1/Label/Label.js

@@ -1,40 +1,101 @@
-import React from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Label/Label.module.css";
-import colors from "../../Label/LabelColors.module.css";
-export default function Label(props) {
+import React from 'react'; // props
+
+import defaultProps from "./props/defaultProps";
+import propTypes from "./props/propTypes"; // methods
+
+import cssJSLogic from "./css/cssJSLogic";
+import { renderNode, isRenderable } from '@zohodesk/utils'; // hoc
+
+import { withComponentRegistrar } from '@zohodesk/dotkit/es/react/ComponentRegistry'; // constants
+
+import { DISPLAY_MODE, FONT_SIZE } from "./constants"; // components
+
+import Flex from '@zohodesk/layout/es/Flex/Flex';
+import Typography from "../../Typography/Typography"; // css
+
+import style from "./css/Label_v1.module.css";
+
+const Label = props => {
   const {
-    text,
-    type,
-    palette,
-    size,
-    clipped,
     htmlFor,
-    title,
     onClick,
-    dataId,
-    dataSelectorId,
-    variant,
-    customClass,
-    id,
-    a11y = {}
+    text,
+    customId,
+    testId,
+    tagAttributes,
+    a11yAttributes,
+    customProps,
+    isRequired,
+    requiredType,
+    isClipped,
+    size,
+    textWeight,
+    layout,
+    renderRightPlaceholderNode,
+    renderLeftPlaceholderNode,
+    i18nKeys
   } = props;
   const {
-    tabIndex
-  } = a11y;
-  return /*#__PURE__*/React.createElement("label", {
-    className: `${style.label} ${style[type]} ${style[size]} ${colors[palette]} ${style[`font_${variant}`]}
-          ${clipped ? style.dotted : ''} ${onClick ? style.pointer : style.cursor} ${customClass} `,
-    htmlFor: htmlFor,
-    "data-title": title,
-    "data-id": dataId,
-    "data-test-id": dataId,
-    "data-selector-id": dataSelectorId,
-    onClick: onClick,
-    id: id,
-    tabIndex: tabIndex
-  }, text);
-}
+    container: tagAttributes_container,
+    label: tagAttributes_label
+  } = tagAttributes;
+  const {
+    container: a11yAttributes_container,
+    label: a11yAttributes_label
+  } = a11yAttributes;
+  const {
+    container: customProps_container,
+    label: customProps_label
+  } = customProps;
+  const {
+    requiredText: i18n_requiredText = 'Required'
+  } = i18nKeys;
+  const {
+    labelClass,
+    requiredClass,
+    containerClass
+  } = cssJSLogic({ ...props,
+    style
+  });
+  const a11yAttributes_requiredText = {
+    'aria-hidden': 'true'
+  };
+
+  const renderRequired = () => /*#__PURE__*/React.createElement(Typography, {
+    $ui_tagName: "span",
+    $ui_className: requiredClass,
+    $a11yAttributes_text: a11yAttributes_requiredText,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: textWeight
+  }, requiredType === 'text' ? `(${i18n_requiredText})` : '*');
+
+  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
+    $tagAttributes_container: { ...tagAttributes_container,
+      'data-selector-id': customId
+    },
+    $ui_displayMode: DISPLAY_MODE[layout],
+    $ui_alignItems: "center",
+    $a11yAttributes_container: a11yAttributes_container,
+    testId: testId,
+    customId: customId,
+    $ui_className: containerClass
+  }, renderNode(renderLeftPlaceholderNode), /*#__PURE__*/React.createElement(Typography, { ...customProps_label,
+    $tagAttributes_text: { ...tagAttributes_label,
+      htmlFor,
+      onClick
+    },
+    $ui_tagName: "label",
+    $ui_className: labelClass,
+    $i18n_dataTitle: text,
+    $a11yAttributes_text: a11yAttributes_label,
+    $ui_size: FONT_SIZE[size],
+    $ui_weight: textWeight,
+    $flag_dotted: isClipped
+  }, text, isRequired && isClipped ? renderRequired() : null), isRequired ? isClipped && renderRequired() : null, renderNode(renderRightPlaceholderNode));
+};
+
+export default withComponentRegistrar(Label, {
+  name: 'ZDC_V1_Label'
+});
 Label.defaultProps = defaultProps;
 Label.propTypes = propTypes;