@zohodesk/components 1.0.0-temp-217.2 → 1.0.0-temp-219

package/README.md

@@ -32,7 +32,12 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.2.55 (yet to publish)
+# 1.2.56
+
+- **CheckBox** 
+  - `data-selector-id` passing to Container component changed to `dataSelectorId`
+
+# 1.2.55
 
 - **ListItemWithAvatar** 
   - `AvatarTeamProps` and `AvatarProps` props has been added under the `customProps` group.

package/es/Button/Button.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { ComponentCustomizer, PROP_CUSTOMIZE_TYPE } from '@zohodesk/dotkit/es/react/components/ComponentCustomizer';
 import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
 import style from "./css/Button.module.css";
@@ -12,7 +13,7 @@ toLowerCase check needed?
 
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
 
-export default function Button(props) {
+function Button(props) {
   let {
     text,
     disabled,
@@ -60,10 +61,17 @@ export default function Button(props) {
     className: loaderChildClass
   }))));
 }
+
 Button.defaultProps = defaultProps;
 Button.propTypes = propTypes; // if (__DOCS__) {
 //   Button.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+export default ComponentCustomizer(Button, {
+  name: 'Button',
+  type: PROP_CUSTOMIZE_TYPE.excludedProps,
+  props: ['text', 'children']
+});

package/es/CheckBox/CheckBox.js

@@ -92,7 +92,7 @@ export default class CheckBox extends React.Component {
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledby,
       "aria-hidden": ariaHidden,
-      "data-selector-id": dataSelectorId || id,
+      dataSelectorId: dataSelectorId || id,
       ...CheckBoxProps
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.boxContainer} ${style[size]} ${customCBoxSize} ${isFilled ? style.filled : ''} ${!isEditable ? `${style[`disabled`]}` : ''}`

package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap

@@ -120,7 +120,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     class="container pointer primary 
            flex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="checkBoxId"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"
@@ -229,7 +229,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     class="container pointer primary 
            inflex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="dataSelectorIdCheck"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"

package/es/Provider/LibraryContext.js

@@ -9,15 +9,13 @@ const LibraryContextProvider = _ref => {
     direction,
     coloredTagVariant,
     hasTagColorInheritedToText,
-    a11y_onOffLabel,
     children
   } = _ref;
   const [value, setValue] = useState({
     isReducedMotion,
     direction,
     coloredTagVariant,
-    hasTagColorInheritedToText,
-    a11y_onOffLabel
+    hasTagColorInheritedToText
   });
 
   function setGlobalContext(key, data) {

package/es/Select/Select.js

@@ -2,6 +2,7 @@
 import React, { Component } from 'react';
 import { Select_defaultProps } from "./props/defaultProps";
 import { Select_propTypes } from "./props/propTypes";
+import { ComponentCustomizer } from '@zohodesk/dotkit/es/react/components/ComponentCustomizer';
 /**** Components ****/
 
 import Popup from "../Popup/Popup";
@@ -964,7 +965,9 @@ let Select = Popup(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
 Select.propTypes = Select_propTypes;
 Select.displayName = 'Select';
-export default Select; // if (__DOCS__) {
+export default ComponentCustomizer(Select, {
+  name: 'Select'
+}); // if (__DOCS__) {
 //   Select.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide',

package/es/Switch/Switch.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { ComponentCustomizer, PROP_CUSTOMIZE_TYPE } from '@zohodesk/dotkit/es/react/components/ComponentCustomizer';
 import { Container, Box } from "../Layout";
 import Label from "../Label/Label";
-import LibraryContext from "../Provider/LibraryContextInit";
 import style from "./Switch.module.css";
-export default class Switch extends React.Component {
+
+class Switch extends React.Component {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -19,7 +20,7 @@ export default class Switch extends React.Component {
     onChange && onChange(!checked, e);
   }
 
-  renderSwitch(context) {
+  render() {
     let {
       id,
       name,
@@ -49,8 +50,6 @@ export default class Switch extends React.Component {
       customLabel = ''
     } = customClass;
     size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-    const isOnOffLabelEnabled = context.a11y_onOffLabel;
-    const onOffLabelType = '';
     return /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       isCover: false,
@@ -78,26 +77,9 @@ export default class Switch extends React.Component {
       htmlFor: id,
       "data-id": dataId,
       "data-test-id": dataId,
-      className: `${style.label} ${style[`${size}Label`]} ${customSwitch} ${onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? style.labelOnTrack : ''}`,
+      className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`,
       tabIndex: isReadOnly || disabled ? '-1' : '0'
-    }, /*#__PURE__*/React.createElement("div", {
-      className: style.thumb
-    }, isOnOffLabelEnabled && onOffLabelType === 'thumb' && /*#__PURE__*/React.createElement("div", {
-      className: style.onOffIndicationHolder
-    }, /*#__PURE__*/React.createElement("div", {
-      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication}`
-    }))), isOnOffLabelEnabled && /*#__PURE__*/React.createElement(Container, {
-      align: "vertical",
-      alignBox: checked ? 'row' : 'row-reverse',
-      className: style.onOffLabel,
-      isCover: false
-    }, onOffLabelType === 'labelOnTrack' && /*#__PURE__*/React.createElement("div", {
-      className: style.onOffIndicationText
-    }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && onOffLabelType === 'track' && /*#__PURE__*/React.createElement("div", {
-      className: `${style.onOffIndication} ${checked ? style.onIndication : style.offIndication} ${style.thumbIndication}`
-    })))), isOnOffLabelEnabled && onOffLabelType === 'labelSide' && /*#__PURE__*/React.createElement(Box, {
-      className: `${style.labelText} ${size === "switch_medium" ? style.mediumLabelText : style.smallLabelText}`
-    }, checked ? 'On' : 'Off'), text && /*#__PURE__*/React.createElement(Label, {
+    })), text && /*#__PURE__*/React.createElement(Label, {
       text: text,
       palette: labelPalette,
       id: id,
@@ -109,15 +91,18 @@ export default class Switch extends React.Component {
     }));
   }
 
-  render() {
-    return /*#__PURE__*/React.createElement(LibraryContext.Consumer, null, context => this.renderSwitch(context));
-  }
-
 }
+
 Switch.defaultProps = defaultProps;
 Switch.propTypes = propTypes; // if (__DOCS__) {
 //   Switch.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+export default ComponentCustomizer(Switch, {
+  name: 'Switch',
+  type: PROP_CUSTOMIZE_TYPE.selectedProps,
+  propNames: ['size']
+});

package/es/Switch/Switch.module.css

@@ -37,7 +37,7 @@
   {
   --switch_off_bg_color: var(--zdt_switch_effect_off_bg);
 }
-.thumb {
+.label:after {
   content: '';
   display: block;
   position: absolute;
@@ -46,21 +46,14 @@
   box-shadow: var(--switch_cricle_box_shadow);
   background-color: var(--switch_circle_bg_color);
   border-radius: var(--switch_circle_border_radius);
-  left: var(--zd_size1) ;
-}
-.onOffIndicationHolder{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100% ;
 }
 
 .checked+.label {
   box-shadow: inset 0 0 0 var(--zd_size10) var(--switch_on_bg_color);
 }
-.checked+label .thumb {
-  right: var(--zd_size1) ;
-  left: auto ;
+
+.checked+.label:after {
+  right: calc( var(--zd_size1) * -1 ) ;
 }
 
 .input {
@@ -72,15 +65,15 @@
   width: var(--zd_size28) ;
 }
 .switch_smallLabel {
-  height: var(--zd_size12) ;
+  height: var(--zd_size9) ;
   width: var(--zd_size22) ;
-  bottom: var(--zd_size1) ;
+  top: calc( var(--zd_size2) * -1 ) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel .thumb{
-  width: var(--zd_size10) ;
-  height: var(--zd_size10) ;
-  top: var(--zd_size1) ;
+.switch_smallLabel:after {
+  width: var(--zd_size12) ;
+  height: var(--zd_size12) ;
+  top: calc( var(--zd_size2) * -1 ) ;
 }
 
 .medium {
@@ -88,21 +81,15 @@
   width: var(--zd_size34) ;
 }
 .switch_mediumLabel {
-  height: var(--zd_size16) ;
+  height: var(--zd_size13) ;
   width: var(--zd_size31) ;
   top: var(--zd_size2) ;
   left: var(--zd_size2) ;
 }
-.switch_smallLabel.labelOnTrack{
-  width: var(--zd_size32) ;
-}
-.switch_mediumLabel.labelOnTrack{
-  width: var(--zd_size42) ;
-}
-.switch_mediumLabel .thumb{
-  width: var(--zd_size12) ;
-  height: var(--zd_size12) ;
-  top: var(--zd_size2) ;
+.switch_mediumLabel:after {
+  width: var(--zd_size18) ;
+  height: var(--zd_size18) ;
+  top: calc( var(--zd_size3) * -1 ) ;
 }
 
 .input:disabled+.label {
@@ -138,102 +125,4 @@
 
 [dir=rtl] .switch+label {
   margin-right: var(--zd_size12) ;
-}
-.onOffLabel{
-  position: absolute;
-  inset: 0;
-  z-index: 2;
-}
-.onOffIndication{    
-  /* css:theme-validation:ignore */
-  border: 0.5px solid;
-}
-.offIndication{
- /* css:theme-validation:ignore */
- border-color: #868585;
- border-radius: 50%;
-}
-.onIndication{
-  /* css:theme-validation:ignore */
-  border-color: var(--switch_on_bg_color);
-  border-radius: 5px;
-}
-.thumbIndication.onIndication{
-   /* css:theme-validation:ignore */
-  border-color: #fff;
-}
-.switch_small .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_small .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_small .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_small .offIndication{
-  width: var(--zd_size5) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.offIndication{
-    margin: 0 var(--zd_size3) ;
-}
-.switch_small .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size5) ;
-}
-.switch_small .thumbIndication.onIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .thumbIndication.onOffLabel{
-  top: calc( var(--zd_size10) * -1 ) ;
-}
-[dir=ltr] .switch_medium .thumbIndication.onOffLabel{
-  right: var(--zd_size3) ;
-}
-[dir=rtl] .switch_medium .thumbIndication.onOffLabel{
-  left: var(--zd_size3) ;
-}
-.switch_medium .offIndication{
-  width: var(--zd_size7) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.offIndication{
-  margin: 0 var(--zd_size5) ;
-}
-.switch_medium .onIndication{
-  width: var(--zd_size1) ;
-  height: var(--zd_size7) ;
-}
-.switch_medium .thumbIndication.onIndication{
-  margin: 0 var(--zd_size7) ;
-}
-.onOffIndicationText{
-    /* css:theme-validation:ignore */
-  color: #fff;
-}
-.switch_small .onOffIndicationText{
-  font-size: var(--zd_font_size7) ;
-  margin: 0 var(--zd_size4) ;
-}
-.switch_medium .onOffIndicationText{
-  font-size: var(--zd_font_size10) ;
-  margin: 0 var(--zd_size6) ;
-}
-.labelText{
-    /* css:theme-validation:ignore */
-  color: #000;
-}
-.smallLabelText{
-  font-size: var(--zd_font_size11) ;
-  margin: var(--zd_size1) 0 0 ;
-}
-.mediumLabelText{
-  font-size: var(--zd_font_size12) ;
-}
-[dir=ltr] .mediumLabelText{
-  margin : var(--zd_size1) 0 0 var(--zd_size2) ;
-}
-[dir=rtl] .mediumLabelText{
-  margin  : var(--zd_size1) var(--zd_size2) 0 0 ;
 }

package/es/TextBox/TextBox.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { ComponentCustomizer } from '@zohodesk/dotkit/es/react/components/ComponentCustomizer';
 /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
 
 import style from "./TextBox.module.css";
-export default class TextBox extends React.PureComponent {
+
+class TextBox extends React.PureComponent {
   constructor(props) {
     super(props);
     this.onChange = this.onChange.bind(this);
@@ -178,6 +180,7 @@ export default class TextBox extends React.PureComponent {
   }
 
 }
+
 TextBox.defaultProps = defaultProps;
 TextBox.propTypes = propTypes; // if (__DOCS__) {
 //   Textbox.docs = {
@@ -186,4 +189,8 @@ TextBox.propTypes = propTypes; // if (__DOCS__) {
 //     external: true,
 //     description: ' '
 //   };
-// }
+// }
+
+export default ComponentCustomizer(TextBox, {
+  name: 'TextBox'
+});

package/es/index.js

@@ -29,7 +29,6 @@ export { default as RippleEffect } from "./RippleEffect/RippleEffect";
 export * from "./Select";
 export { default as Stencils } from "./Stencils/Stencils";
 export { default as Switch } from "./Switch/Switch";
-export { default as SwitchNew } from "./SwitchNew/SwitchNew";
 export * from "./Tab";
 export { default as Tag } from "./Tag/Tag";
 export { default as Textarea } from "./Textarea/Textarea";

package/lib/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = Button;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,6 +11,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _ComponentCustomizer = require("@zohodesk/dotkit/es/react/components/ComponentCustomizer");
+
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
@@ -81,4 +83,12 @@ Button.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+var _default = (0, _ComponentCustomizer.ComponentCustomizer)(Button, {
+  name: 'Button',
+  type: _ComponentCustomizer.PROP_CUSTOMIZE_TYPE.excludedProps,
+  props: ['text', 'children']
+});
+
+exports["default"] = _default;

package/lib/CheckBox/CheckBox.js

@@ -143,7 +143,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-hidden": ariaHidden,
-        "data-selector-id": dataSelectorId || id
+        dataSelectorId: 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 : '', " ").concat(!isEditable ? "".concat(_CheckBoxModule["default"]["disabled"]) : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap

@@ -120,7 +120,7 @@ exports[`CheckBox component Should be render ID 1`] = `
     class="container pointer primary 
            flex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="checkBoxId"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"
@@ -229,7 +229,7 @@ exports[`CheckBox component Should be render dataSelectorId 1`] = `
     class="container pointer primary 
            inflex rowdir vCenter"
     data-id="checkBox"
-    data-selector-id="container"
+    data-selector-id="dataSelectorIdCheck"
     data-test-id="checkBox"
     role="checkbox"
     tabindex="0"

package/lib/Provider/LibraryContext.js

@@ -44,15 +44,13 @@ var LibraryContextProvider = function LibraryContextProvider(_ref) {
       direction = _ref.direction,
       coloredTagVariant = _ref.coloredTagVariant,
       hasTagColorInheritedToText = _ref.hasTagColorInheritedToText,
-      a11y_onOffLabel = _ref.a11y_onOffLabel,
       children = _ref.children;
 
   var _useState = (0, _react.useState)({
     isReducedMotion: isReducedMotion,
     direction: direction,
     coloredTagVariant: coloredTagVariant,
-    hasTagColorInheritedToText: hasTagColorInheritedToText,
-    a11y_onOffLabel: a11y_onOffLabel
+    hasTagColorInheritedToText: hasTagColorInheritedToText
   }),
       _useState2 = _slicedToArray(_useState, 2),
       value = _useState2[0],

package/lib/Select/Select.js

@@ -13,6 +13,8 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _ComponentCustomizer = require("@zohodesk/dotkit/es/react/components/ComponentCustomizer");
+
 var _Popup = _interopRequireDefault(require("../Popup/Popup"));
 
 var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon/TextBoxIcon"));
@@ -1011,7 +1013,10 @@ var Select = (0, _Popup["default"])(SelectComponent);
 Select.defaultProps = SelectComponent.defaultProps;
 Select.propTypes = _propTypes.Select_propTypes;
 Select.displayName = 'Select';
-var _default = Select; // if (__DOCS__) {
+
+var _default = (0, _ComponentCustomizer.ComponentCustomizer)(Select, {
+  name: 'Select'
+}); // if (__DOCS__) {
 //   Select.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide',
@@ -1022,4 +1027,5 @@ var _default = Select; // if (__DOCS__) {
 //   Select.propTypes = SelectComponent.propTypes;
 // }
 
+
 exports["default"] = _default;

package/lib/Switch/Switch.js

@@ -13,12 +13,12 @@ var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _ComponentCustomizer = require("@zohodesk/dotkit/es/react/components/ComponentCustomizer");
+
 var _Layout = require("../Layout");
 
 var _Label = _interopRequireDefault(require("../Label/Label"));
 
-var _LibraryContextInit = _interopRequireDefault(require("../Provider/LibraryContextInit"));
-
 var _SwitchModule = _interopRequireDefault(require("./Switch.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -69,8 +69,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       onChange && onChange(!checked, e);
     }
   }, {
-    key: "renderSwitch",
-    value: function renderSwitch(context) {
+    key: "render",
+    value: function render() {
       var _this$props2 = this.props,
           id = _this$props2.id,
           name = _this$props2.name,
@@ -101,8 +101,6 @@ var Switch = /*#__PURE__*/function (_React$Component) {
           _customClass$customLa = customClass.customLabel,
           customLabel = _customClass$customLa === void 0 ? '' : _customClass$customLa;
       size !== 'small' ? size = 'switch_medium' : size = 'switch_small';
-      var isOnOffLabelEnabled = context.a11y_onOffLabel;
-      var onOffLabelType = '';
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
         align: "vertical",
         isCover: false,
@@ -129,26 +127,9 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         htmlFor: id,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch, " ").concat(onOffLabelType === 'labelOnTrack' && isOnOffLabelEnabled ? _SwitchModule["default"].labelOnTrack : ''),
+        className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch),
         tabIndex: isReadOnly || disabled ? '-1' : '0'
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].thumb
-      }, isOnOffLabelEnabled && onOffLabelType === 'thumb' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].onOffIndicationHolder
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SwitchModule["default"].onOffIndication, " ").concat(checked ? _SwitchModule["default"].onIndication : _SwitchModule["default"].offIndication)
-      }))), isOnOffLabelEnabled && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-        align: "vertical",
-        alignBox: checked ? 'row' : 'row-reverse',
-        className: _SwitchModule["default"].onOffLabel,
-        isCover: false
-      }, onOffLabelType === 'labelOnTrack' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: _SwitchModule["default"].onOffIndicationText
-      }, checked ? 'ON' : 'OFF'), isOnOffLabelEnabled && onOffLabelType === 'track' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_SwitchModule["default"].onOffIndication, " ").concat(checked ? _SwitchModule["default"].onIndication : _SwitchModule["default"].offIndication, " ").concat(_SwitchModule["default"].thumbIndication)
-      })))), isOnOffLabelEnabled && onOffLabelType === 'labelSide' && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_SwitchModule["default"].labelText, " ").concat(size === "switch_medium" ? _SwitchModule["default"].mediumLabelText : _SwitchModule["default"].smallLabelText)
-      }, checked ? 'On' : 'Off'), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
+      })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,
         palette: labelPalette,
         id: id,
@@ -158,25 +139,23 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         customClass: customLabel
       }, LabelProps)));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      return /*#__PURE__*/_react["default"].createElement(_LibraryContextInit["default"].Consumer, null, function (context) {
-        return _this2.renderSwitch(context);
-      });
-    }
   }]);
 
   return Switch;
 }(_react["default"].Component);
 
-exports["default"] = Switch;
 Switch.defaultProps = _defaultProps.defaultProps;
 Switch.propTypes = _propTypes.propTypes; // if (__DOCS__) {
 //   Switch.docs = {
 //     componentGroup: 'Form Elements',
 //     folderName: 'Style Guide'
 //   };
-// }
+// }
+
+var _default = (0, _ComponentCustomizer.ComponentCustomizer)(Switch, {
+  name: 'Switch',
+  type: _ComponentCustomizer.PROP_CUSTOMIZE_TYPE.selectedProps,
+  propNames: ['size']
+});
+
+exports["default"] = _default;