@zohodesk/components 1.6.7 → 1.6.11-exp-6

package/es/MultiSelect/MultiSelect.module.css

@@ -42,17 +42,18 @@
 }
 
 .container.medium {
-  padding-bottom: var(--zd_size8) ;
+  padding-block-end: var(--zd_size8) ;
 }
 
 .container.xmedium {
+  padding-block-end: var(--zd_size3) ;
   min-height: var(--zd_size30) ;
-  padding-bottom: var(--zd_size3) ;
 }
 
 .delete {
+  padding-block: var(--zd_size2) ;
+  padding-inline:var(--zd_size6) ;
   font: inherit;
-  padding: var(--zd_size2) var(--zd_size6) ;
   cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
@@ -85,20 +86,14 @@
   max-width: 100% ;
 }
 
-[dir=ltr] .container.xmedium .tag {
-  margin: var(--zd_size2) var(--zd_size10) 0 0 ;
+.container.xmedium .tag {
+  margin-block: var(--zd_size2) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }
 
-[dir=rtl] .container.xmedium .tag {
-  margin: var(--zd_size2) 0 0 var(--zd_size10) ;
-}
-
-[dir=ltr] .container.medium .tag {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-
-[dir=rtl] .container.medium .tag {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+.container.medium .tag {
+  margin-block: var(--zd_size5) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }
 .responsiveParent{
   width: 100% ;
@@ -126,7 +121,8 @@
 .commonMessage {
   font-size: var(--zd_font_size14) ;
   composes: semibold from '../common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
 }
 .default,
 .dark {
@@ -175,42 +171,33 @@
   right: 0 ;
 }
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-block-end: var(--zd_size6) ;
 }
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin-block: var(--zd_size6) ;
+  margin-inline:0 ;
 }
 .loader {
   padding: var(--zd_size10) ;
 }
 .iconContainer {
-  padding-top: var(--zd_size3) 
-}
-[dir=ltr] .clearIconSpace {
-  padding-right: var(--zd_size37) 
+  padding-block-start: var(--zd_size3) 
 }
-[dir=rtl] .clearIconSpace {
-  padding-left: var(--zd_size37) 
+.clearIconSpace {
+  padding-inline-end: var(--zd_size37) 
 }
 
 .more {
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
+  margin-block-start: var(--zd_size5) ;
   font-weight: var(--zd-fw-normal);
+  margin-inline-end:var(--zd_size3) ;
   cursor: pointer;
-  margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0
 }
 
-[dir=ltr] .more {
-  margin-right:var(--zd_size3) 
-}
-
-[dir=rtl] .more {
-  margin-left:var(--zd_size3) 
-}
-
 .rightPlaceholder{
   height: 100% ;
-}
+}

package/es/MultiSelect/SelectedOptions.module.css

@@ -1,15 +1,11 @@
 .tag {
   max-width: 100% ;
 }
-[dir=ltr] .xmedium {
-  margin: 0 var(--zd_size10) var(--zd_size2) 0 ;
+.xmedium {
+  margin-block: 0 var(--zd_size2) ;
+  margin-inline:0 var(--zd_size10) ;
 }
-[dir=rtl] .xmedium {
-  margin: 0 0 var(--zd_size2) var(--zd_size10) ;
-}
-[dir=ltr] .medium {
-  margin: var(--zd_size5) var(--zd_size10) 0 0 ;
-}
-[dir=rtl] .medium {
-  margin: var(--zd_size5) 0 0 var(--zd_size10) ;
+.medium {
+  margin-block: var(--zd_size5) 0 ;
+  margin-inline:0 var(--zd_size10) ;
 }

package/es/Radio/Radio.module.css

@@ -58,11 +58,11 @@
 }
 
 .medium.withSecondaryText {
-  margin-top: var(--zd_size1) ;
+  margin-block-start: var(--zd_size1) ;
 }
 
 .small.withSecondaryText {
-  margin-top: var(--zd_size3) ;
+  margin-block-start: var(--zd_size3) ;
 }
 
 .radioLabel {
@@ -145,4 +145,4 @@
   100% {
     transform: scale(1);
   }
-}
+}

package/es/ResponsiveDropBox/ResponsiveDropBox.module.css

@@ -2,5 +2,5 @@
   max-height: 70vh ;
 }
 .boxPadding{
-  padding-bottom: var(--zd_size10) ;
+  padding-block-end: var(--zd_size10) ;
 }

package/es/Ribbon/Ribbon.module.css

@@ -339,8 +339,11 @@
   composes: semibold from '../common/common.module.css';
   display: inline-block;
   height: var(--zd_size28) ;
+  padding-block:var(--zd_size6) ;
+  padding-inline:var(--zd_size5) var(--zd_size8) ;
   border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
+;
 }
 
 [dir=ltr] .tag {
@@ -351,7 +354,7 @@
     /*rtl: 3px 0 0 3px*/
   ;
   margin-left: var(--zd_size13) ;
-  padding: var(--zd_size6) var(--zd_size8) var(--zd_size6) var(--zd_size5) ;
+;
 }
 
 [dir=rtl] .tag {
@@ -360,7 +363,7 @@
   border-radius: 3px 0 0 3px
   ;
   margin-right: var(--zd_size13) ;
-  padding: var(--zd_size6) var(--zd_size5) var(--zd_size6) var(--zd_size8) ;
+;
 }
 
 .tag::before {
@@ -402,13 +405,14 @@
 .sticker {
   display: block;
   height: var(--zd_size18) ;
+  padding-block:var(--zd_size3) ;
+  padding-inline:var(--zd_size10) ;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   text-align: center;
   border-width: 1px 0;
   border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
-  padding: var(--zd_size3) var(--zd_size10) ;
 }
 
 .sticker.small {
@@ -485,18 +489,11 @@
 
 .children {
   display: inline-block;
+  margin-inline-end: var(--zd_size4) ;
   vertical-align: top;
   line-height: 0;
 }
 
-[dir=ltr] .children {
-  margin-right: var(--zd_size4) ;
-}
-
-[dir=rtl] .children {
-  margin-left: var(--zd_size4) ;
-}
-
 .childText {
   position: relative;
-}
+}

package/es/Select/Select.module.css

@@ -21,11 +21,13 @@
 }
 
 .box_small .emptyState {
-  padding: var(--zd_size12) var(--zd_size6) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size6) ;
 }
 
 .box_medium .emptyState {
-  padding: var(--zd_size12) var(--zd_size15) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
 }
 
 .hide {
@@ -42,27 +44,32 @@
 }
 
 .small.search {
-  padding: 0 var(--zd_size5) ;
+  padding-block: 0 ;
+  padding-inline:var(--zd_size5) ;
 }
 
 .medium.search {
-  padding: var(--zd_size3) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size3) 0 ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .title {
-  margin-bottom: var(--zd_size6) ;
+  margin-block-end: var(--zd_size6) ;
 }
 
 .groupTitle {
-  margin: var(--zd_size6) 0 ;
+  margin-block: var(--zd_size6) ;
+  margin-inline:0 ;
 }
 
 .listItemContainer {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .responsivelistItemContainer {
-  padding: var(--zd_size10) 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline:0 ;
 }
 
 .readonly {
@@ -98,20 +105,18 @@
   right: 0 ;
 }
 
-[dir=ltr] .iconSelect {
-  padding-left: var(--zd_size30) ;
-}
-
-[dir=rtl] .iconSelect {
-  padding-right: var(--zd_size30) ;
+.iconSelect {
+  padding-inline-start: var(--zd_size30) ;
 }
 
 .dropBoxList {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 .responsivedropBoxList {
-  padding: var(--zd_size10) 0 0 0 ;
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline:0 ;
 }
 
 .rotate {
@@ -135,4 +140,4 @@
 
 .loader {
   padding: var(--zd_size10) ;
-}
+}

package/es/Switch/Switch.module.css

@@ -117,12 +117,5 @@
 .switch+label {
   position: relative;
   top: calc( var(--zd_size1) * -1 ) ;
+  margin-inline-start: var(--zd_size12) ;
 }
-
-[dir=ltr] .switch+label {
-  margin-left: var(--zd_size12) ;
-}
-
-[dir=rtl] .switch+label {
-  margin-right: var(--zd_size12) ;
-}

package/es/Tab/Tab.module.css

@@ -31,9 +31,10 @@
   transition: all var(--zd_transition2);
 }
 .alpha {
+  padding-inline: var(--zd_size18) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  padding: 0 var(--zd_size18) ;
 }
 .tabAlpha {
   composes: alpha;
@@ -54,16 +55,12 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
+  padding-inline:  var(--zd_size4) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
+  margin-inline-end: var(--zd_size40) ;
   text-transform: capitalize;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .beta {
-  margin-right: var(--zd_size40) ;
-}
-[dir=rtl] .beta {
-  margin-left: var(--zd_size40) ;
 }
 .tabBeta {
   composes: beta;
@@ -77,15 +74,11 @@
   color: var(--zdt_tab_alpha_hover_text);
 }
 .delta {
+  padding-inline: var(--zd_size4) ;
+  padding-block:0 ;
   font-size: var(--zd_font_size11) ;
   line-height: 3;
-  padding: 0 var(--zd_size4) ;
-}
-[dir=ltr] .delta {
-  margin-right: var(--zd_size10) ;
-}
-[dir=rtl] .delta {
-  margin-left: var(--zd_size10) ;
+  margin-inline-end: var(--zd_size10) ;
 }
 .tabDelta {
   composes: delta;

package/es/Tab/Tabs.module.css

@@ -9,12 +9,8 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .alpha_padding {
-  padding-left: var(--zd_size15) ;
-}
-
-[dir=rtl] .alpha_padding {
-  padding-right: var(--zd_size15) ;
+.alpha_padding {
+  padding-inline-start: var(--zd_size15) ;
 }
 
 .alpha_border {
@@ -65,12 +61,8 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .beta_padding {
-  padding-left: var(--zd_size13) ;
-}
-
-[dir=rtl] .beta_padding {
-  padding-right: var(--zd_size13) ;
+.beta_padding {
+  padding-inline-start: var(--zd_size13) ;
 }
 
 .beta_border {
@@ -82,12 +74,8 @@
   background-color: var(--zdt_tabs_alpha_bg);
 }
 
-[dir=ltr] .delta_padding {
-  padding-left: var(--zd_size10) ;
-}
-
-[dir=rtl] .delta_padding {
-  padding-right: var(--zd_size10) ;
+.delta_padding {
+  padding-inline-start: var(--zd_size10) ;
 }
 
 .delta_border {
@@ -137,11 +125,12 @@
 }
 
 .search {
-  padding: var(--zd_size6) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size6) 0 ;
+  padding-inline:var(--zd_size20) ;
 }
 
 .emptyStateContainer {
-  padding-bottom: var(--zd_size15) ;
+  padding-block-end: var(--zd_size15) ;
 }
 
 .emptyStateTitle {
@@ -163,5 +152,6 @@
 }
 
 .listWrapper {
-  padding: var(--zd_size10) 0 ;
-}
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
+}

package/es/Tag/Tag.module.css

@@ -79,13 +79,14 @@
   --tag_padding: var(--zd_size1);
   --tag_inner_text_padding: 0 var(--zd_size7);
 }
+.small .avatar {
+  margin-inline-end: calc( var(--zd_size8) * -1 ) ;
+}
 [dir=ltr] .small .avatar {
   transform: scale(0.8) translateX(-2px);
-  margin-right: calc( var(--zd_size8) * -1 ) ;
 }
 [dir=rtl] .small .avatar {
   transform: scale(0.8) translateX(2px);
-  margin-left: calc( var(--zd_size8) * -1 ) ;
 }
 .smalltext {
   --tag_font_size: var(--zd_font_size12);
@@ -251,4 +252,4 @@
 }
 .darkPrimaryDotted {
   composes: dark primaryDotted;
-}
+}

package/es/Tooltip/Tooltip.module.css

@@ -13,6 +13,8 @@
 
 .tooltipcont {
   color: var(--zdt_tooltip_default_text);
+  padding-block:0 ;
+  padding-inline: var(--zd_size10) ;
   font-size: var(--zd_font_size13) ;
   font-weight: var(--zd-fw-semibold);
   word-break: break-word;
@@ -21,7 +23,6 @@
   min-height: var(--zd_size24) ;
   overflow: hidden;
   background-color: var(--zdt_tooltip_default_bg);
-  padding: 0 var(--zd_size10) ;
   border-style: solid;
   border-color: transparent;
   border-radius: 4px;
@@ -130,4 +131,4 @@
   to {
     opacity: 1;
   }
-}
+}

package/es/Typography/Typography.js

@@ -9,18 +9,20 @@ import defaultStyle from "./css/Typography.module.css";
 const Typography = props => {
   const {
     children,
+    as,
     $ui_tagName,
+    dataTitle,
     $i18n_dataTitle,
     testId,
     customId,
+    tagAttributes,
     $tagAttributes_text,
+    a11yAttributes,
     $a11yAttributes_text,
     customStyle,
+    highlightConfig,
     $ui_highlightConfig
   } = props;
-  const {
-    data: highlightData = []
-  } = $ui_highlightConfig;
   const style = mergeStyle(defaultStyle, customStyle);
   const {
     typographyClass
@@ -28,14 +30,22 @@ const Typography = props => {
     props,
     style
   });
-  return /*#__PURE__*/React.createElement($ui_tagName, {
+  const finalTagName = as !== undefined ? as : $ui_tagName;
+  const finalA11yAttributes = a11yAttributes !== undefined ? a11yAttributes : $a11yAttributes_text;
+  const finalTagAttributes = tagAttributes !== undefined ? tagAttributes : $tagAttributes_text;
+  const finalDataTitle = dataTitle !== undefined ? dataTitle : $i18n_dataTitle;
+  const finalHighlightConfig = highlightConfig !== undefined ? highlightConfig : $ui_highlightConfig;
+  const {
+    data: highlightData = []
+  } = finalHighlightConfig;
+  return /*#__PURE__*/React.createElement(finalTagName, {
     className: typographyClass,
-    'data-title': $i18n_dataTitle,
+    'data-title': finalDataTitle,
     'data-id': customId,
     'data-test-id': testId,
-    ...$tagAttributes_text,
-    ...$a11yAttributes_text
-  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...$ui_highlightConfig,
+    ...finalTagAttributes,
+    ...finalA11yAttributes
+  }, highlightData && highlightData.length > 0 && typeof children === 'string' ? highlightText({ ...finalHighlightConfig,
     text: children
   }) : children);
 };