@zohodesk/components 1.0.0-temp-214 → 1.0.0-temp-215

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from './TabWrapper';
-export { default as TabContentWrapper } from './TabContentWrapper';
-export { default as TabContent } from './TabContent';
-export { default as Tabs } from './Tabs';
-export { default as Tab } from './Tab';
+export { default as TabWrapper } from "./TabWrapper";
+export { default as TabContentWrapper } from "./TabContentWrapper";
+export { default as TabContent } from "./TabContent";
+export { default as Tabs } from "./Tabs";
+export { default as Tab } from "./Tab";

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Avatar from '../Avatar/Avatar';
-import { Container } from '../Layout';
-import Button from '../semantic/Button/Button';
-import { useUniqueId } from '../../Provider/IdProvider';
-import style from '../../Tag/Tag.module.css';
+import Avatar from "../Avatar/Avatar";
+import { Container } from "../Layout";
+import Button from "../semantic/Button/Button";
+import { useUniqueId } from "../../Provider/IdProvider";
+import style from "../../Tag/Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../TextBox/TextBox.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../TextBox/TextBox.module.css";
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import TextBox from '../TextBox/TextBox';
-import { Container, Box } from '../Layout';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import TextBox from "../TextBox/TextBox";
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '../../semantic/Button/semanticButton.module.css';
-import style from '../../TextBoxIcon/TextBoxIcon.module.css';
+import btnStyle from "../../semantic/Button/semanticButton.module.css";
+import style from "../../TextBoxIcon/TextBoxIcon.module.css";
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Textarea/Textarea.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Textarea/Textarea.module.css";
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getLibraryConfig } from '../../Provider/Config';
-import ResizeObserver from '../../Responsive/ResizeObserver';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getLibraryConfig } from "../../Provider/Config";
+import ResizeObserver from "../../Responsive/ResizeObserver";
 import selectn from 'selectn';
-import { whiteSpaceClassMapping } from '../../utils/cssUtils';
-import style from '../../Tooltip/Tooltip.module.css';
+import { whiteSpaceClassMapping } from "../../utils/cssUtils";
+import style from "../../Tooltip/Tooltip.module.css";
 export default class Tooltip extends React.Component {
   constructor(props) {
     super(props);

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import cssJSLogic from './css/cssJSLogic';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from './css/Typography.module.css';
+import defaultStyle from "./css/v1_Typography.module.css";
 
 const Typography = props => {
   const {

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from '../utils';
+import { letterspacingMapping, lineheightMapping } from "../utils";
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../../semantic/Button/semanticButton.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../../semantic/Button/semanticButton.module.css";
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from './Button/Button';
+export { default as SemanticButton } from "./Button/Button";

package/lib/CheckBox/CheckBox.js

@@ -126,16 +126,17 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           role = _a11y$role === void 0 ? 'checkbox' : _a11y$role,
           _a11y$ariaChecked = a11y.ariaChecked,
           ariaChecked = _a11y$ariaChecked === void 0 ? checked : _a11y$ariaChecked;
+      var isEditable = !(isReadOnly || disabled);
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         dataId: dataId,
         isCover: false,
         isInline: text ? false : true,
         alignBox: "row",
         align: "vertical",
-        className: "".concat(_CheckBoxModule["default"].container, " ").concat(accessMode, " ").concat(isReadOnly || disabled ? '' : "".concat(_CheckBoxModule["default"][palette]), " \n        ").concat(checked ? "".concat(_CheckBoxModule["default"]["checked".concat(palette)]) : '', " ").concat(customCheckBox),
+        className: "".concat(_CheckBoxModule["default"].container, " ").concat(accessMode, " ").concat(!isEditable ? '' : "".concat(_CheckBoxModule["default"][palette]), " \n        ").concat(checked ? "".concat(_CheckBoxModule["default"]["checked".concat(palette)]) : '', "  ").concat(customCheckBox),
         "data-title": toolTip,
-        onClick: isReadOnly || disabled ? null : this.onChange,
-        tabIndex: isReadOnly || disabled || ariaHidden ? '-1' : '0',
+        onClick: !isEditable ? null : this.onChange,
+        tabIndex: !isEditable || ariaHidden ? '-1' : '0',
         "aria-checked": ariaChecked,
         eleRef: this.handleGetContainerRef,
         role: role,
@@ -144,7 +145,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-hidden": ariaHidden,
         "data-selector-id": dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
+        className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {
         type: "hidden",
         id: id,

package/lib/CheckBox/CheckBox.module.css

@@ -97,10 +97,10 @@
   margin-right: var(--zd_size6) ;
 }
 
-.checkedprimary,
+ .checkedprimary,
 .checkeddanger {
   stroke: var(--checkbox_checked_stroke_color);
-}
+} 
 .primary:hover
 /* .primary:focus  */
 {
@@ -138,6 +138,9 @@
 .checkeddangerLabel {
   --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
 }
+.disabled {
+  opacity: 0.7
+}
 @keyframes tickAnimate {
   0% {
     stroke-dashoffset: 40;