@zohodesk/components 1.4.12 → 1.4.13

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

@@ -1,297 +0,0 @@
-import PropTypes from 'prop-types';
-export const Select_propTypes = {
-  animationStyle: PropTypes.string,
-  autoComplete: PropTypes.bool,
-  autoSelectDebouneTime: PropTypes.number,
-  autoSelectOnType: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  boxSize: PropTypes.string,
-  className: PropTypes.string,
-  closePopupOnly: PropTypes.func,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string,
-  excludeOptions: PropTypes.array,
-  getChildren: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  getCustomEmptyState: PropTypes.func,
-  getFooter: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getPopupHandlers: PropTypes.func,
-  getRef: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isDefaultSelectValue: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isParentBased: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupOpenOnEnter: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearchClearOnClose: PropTypes.bool,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needCloseOnSelect: PropTypes.bool,
-  needListBorder: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needSelectDownIcon: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onAddNewOption: PropTypes.func,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxClose: PropTypes.func,
-  onDropBoxOpen: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }))]).isRequired,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchBoxSize: PropTypes.string,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string, PropTypes.number]), PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  })]),
-  size: PropTypes.oneOf(['small', 'medium']),
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  valueField: PropTypes.string,
-  htmlId: PropTypes.string,
-  children: PropTypes.node,
-  onFocus: PropTypes.func,
-  iconOnHover: PropTypes.bool,
-  customProps: PropTypes.shape({
-    TextBoxProps: PropTypes.object,
-    TextBoxIconProps: PropTypes.object,
-    DropdownSearchTextBoxProps: PropTypes.object,
-    listItemProps: PropTypes.object,
-    SuggestionsProps: PropTypes.object
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  openPopupOnly: PropTypes.bool,
-  ariaLabelledby: PropTypes.string,
-  positionsOffset: PropTypes.array,
-  targetOffset: PropTypes.array,
-  isRestrictScroll: PropTypes.bool,
-  dropBoxPortalId: PropTypes.string
-};
-export const GroupSelect_propTypes = {
-  groupedOptions: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
-    valueField: PropTypes.string,
-    textField: PropTypes.string,
-    options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      text: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    }))])
-  })),
-  selectedOption: PropTypes.shape({
-    groupId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  }),
-  emptyMessage: PropTypes.string.isRequired,
-  placeHolder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  onKeyDown: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  needSearch: PropTypes.bool,
-  searchEmptyMessage: PropTypes.string,
-  getRef: PropTypes.func,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needSelectDownIcon: PropTypes.bool,
-  isPopupOpenOnEnter: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  autoSelectOnType: PropTypes.bool,
-  autoSelectDebouneTime: PropTypes.number,
-  dataId: PropTypes.string,
-  dataIdSlctComp: PropTypes.string,
-  dataIdDownIcon: PropTypes.string,
-  dataIdSrchEmptyMsg: PropTypes.string,
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  searchDebounceTime: PropTypes.func,
-  needLocalSearch: PropTypes.bool,
-  onSearch: PropTypes.func,
-  isSearchClearOnClose: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  className: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  searchBoxSize: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  needTick: PropTypes.bool,
-  children: PropTypes.node,
-  getFooter: PropTypes.func,
-  htmlId: PropTypes.string,
-  iconOnHover: PropTypes.bool,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  closePopupOnly: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isRestrictScroll: PropTypes.bool,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  isDefaultSelectValue: PropTypes.bool
-};
-export const SelectWithAvatar_propTypes = { ...Select_propTypes,
-  textBoxClass: PropTypes.string,
-  imageField: PropTypes.string,
-  animationStyle: PropTypes.string,
-  avatarPalette: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  className: PropTypes.string,
-  closePopupOnly: PropTypes.func,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string,
-  excludeOptions: PropTypes.array,
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getRef: PropTypes.func,
-  groupName: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  isSearchClearOnClose: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needBorder: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxClose: PropTypes.func,
-  onDropBoxOpen: PropTypes.func,
-  onRemove: PropTypes.func,
-  onSearch: PropTypes.func,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string,
-    photoURL: PropTypes.string
-  }))]).isRequired,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectedValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  size: PropTypes.oneOf(['small', 'medium']),
-  tagSize: PropTypes.string,
-  textBoxSize: PropTypes.string,
-  textBoxVariant: PropTypes.string,
-  textField: PropTypes.string,
-  title: PropTypes.string,
-  togglePopup: PropTypes.func,
-  valueField: PropTypes.string,
-  htmlId: PropTypes.string,
-  needEffect: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
-};
-export const SelectWithIcon_propTypes = {
-  animationStyle: PropTypes.oneOf(['default', 'bounce']),
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  boxPosition: PropTypes.oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
-  dataId: PropTypes.string,
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  getContainerRef: PropTypes.func,
-  getNextOptions: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  iconClass: PropTypes.string,
-  iconName: PropTypes.string,
-  iconSize: PropTypes.string,
-  idKey: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  isNextOptions: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  maxLength: PropTypes.string,
-  needIcon: PropTypes.bool,
-  needListBorder: PropTypes.bool,
-  needSearch: PropTypes.bool,
-  needTick: PropTypes.bool,
-  onChange: PropTypes.func,
-  options: PropTypes.array,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchBoxPlaceHolder: PropTypes.string,
-  searchEmptyMessage: PropTypes.string,
-  selectedId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  selectedValue: PropTypes.string,
-  size: PropTypes.oneOf(['small', 'medium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  textBoxVariant: PropTypes.oneOf(['primary', 'secondary', 'default']),
-  togglePopup: PropTypes.func,
-  valueKey: PropTypes.string,
-  htmlId: PropTypes.string,
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string,
-  title: PropTypes.string,
-  className: PropTypes.string,
-  needBorder: PropTypes.bool,
-  searchBoxSize: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  boxSize: PropTypes.string,
-  emptyMessage: PropTypes.string,
-  isAbsolutePositioningNeeded: PropTypes.bool,
-  isRestrictScroll: PropTypes.bool,
-  positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
-};

package/es/v1/Stencils/Stencils.js

@@ -1,26 +0,0 @@
-import React, { memo } from 'react';
-import { defaultProps } from "./props/defaultProps";
-import { propTypes } from "./props/propTypes";
-import style from "../../Stencils/Stencils.module.css";
-
-function Stencils(props) {
-  let {
-    shape,
-    size,
-    palette,
-    customClass
-  } = props;
-  size = shape === 'rect' ? style[size] : style[`c${size}`];
-  shape = shape === 'rect' ? style.rectangular : style.circle;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `${style.container} ${shape} ${size} ${style[palette]} ${customClass}`
-  });
-}
-
-Stencils.propTypes = propTypes;
-Stencils.defaultProps = defaultProps;
-const MemoizedStencils = /*#__PURE__*/memo(Stencils);
-MemoizedStencils.propTypes = propTypes;
-MemoizedStencils.defaultProps = defaultProps;
-MemoizedStencils.displayName = 'Stencils';
-export default MemoizedStencils;

package/es/v1/Stencils/props/defaultProps.js

@@ -1,6 +0,0 @@
-export const defaultProps = {
-  palette: 'primary',
-  shape: 'rect',
-  size: 'medium',
-  customClass: ''
-};

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

@@ -1,7 +0,0 @@
-import PropTypes from 'prop-types';
-export const propTypes = {
-  palette: PropTypes.oneOf(['primary', 'secondary', 'dark']),
-  shape: PropTypes.oneOf(['rect', 'circle']),
-  size: PropTypes.oneOf(['small', 'medium', 'large', 'default']),
-  customClass: PropTypes.string
-};

package/es/v1/Switch/Switch.js

@@ -1,138 +0,0 @@
-import React from 'react'; // props
-
-import defaultProps from "./props/defaultProps";
-import propTypes from "./props/propTypes"; // methods
-
-import cssJSLogic from "./css/cssJSLogic";
-import { mergeStyle } from '@zohodesk/utils'; // hooks
-
-import useSwitch from "./useSwitch"; // constants
-
-import { ALIGN_ITEMS, ITEMS_DIRECTION, OFF_LABEL_RADIUS, THUMB_RADIUS } from "./contants"; // components
-
-import Flex from '@zohodesk/layout/es/Flex/Flex';
-import Label from "../../Label/Label"; // css
-
-import defaultStyle from "./css/Switch_v1.module.css";
-
-const Switch = props => {
-  const {
-    name,
-    value,
-    id,
-    size,
-    isDisabled,
-    isReadOnly,
-    hasStateIndication,
-    label,
-    labelPlacement,
-    labelSize,
-    title,
-    customProps,
-    tagAttributes,
-    a11yAttributes,
-    i18nKeys,
-    customId,
-    testId,
-    customStyle
-  } = props;
-  const {
-    container: customProps_container,
-    label: customProps_label
-  } = customProps;
-  const {
-    container: tagAttributes_container,
-    switch: tagAttributes_switch
-  } = tagAttributes;
-  const {
-    container: a11yAttributes_container,
-    switch: a11yAttributes_switch = {},
-    label: a11yAttributes_label
-  } = a11yAttributes;
-  const {
-    ariaDisabled = isDisabled,
-    ariaLabel,
-    ...restA11yAttributes_switch
-  } = a11yAttributes_switch;
-  const {
-    readOnlyAriaLabel: i18n_readOnlyAriaLabel = 'Read Only'
-  } = i18nKeys;
-  const readOnlyAriaLabel = label ? `${label}, ${i18n_readOnlyAriaLabel}` : i18n_readOnlyAriaLabel;
-  const {
-    isChecked,
-    handleChange
-  } = useSwitch(props);
-  const style = mergeStyle(defaultStyle, customStyle);
-  const {
-    containerClass,
-    labelClass,
-    trackClass,
-    trackWrapperClass,
-    thumbClass,
-    labelIndicationClass
-  } = cssJSLogic({
-    props: { ...props,
-      isChecked
-    },
-    style
-  });
-  return /*#__PURE__*/React.createElement(Flex, { ...customProps_container,
-    $ui_displayMode: "inline",
-    $ui_direction: ITEMS_DIRECTION[labelPlacement],
-    $ui_alignItems: ALIGN_ITEMS[labelPlacement],
-    $tagAttributes_container: { ...tagAttributes_container,
-      'data-selector-id': customId
-    },
-    testId: testId,
-    customId: customId,
-    $ui_className: containerClass,
-    $a11yAttributes_container: a11yAttributes_container
-  }, label && /*#__PURE__*/React.createElement(Label, { ...customProps_label,
-    text: label,
-    palette: isDisabled ? 'primary' : 'default',
-    size: labelSize,
-    htmlFor: id,
-    customClass: labelClass,
-    a11y: a11yAttributes_label,
-    clipped: true,
-    title: label
-  }), /*#__PURE__*/React.createElement(Flex, {
-    $flag_shrink: false,
-    $ui_className: trackWrapperClass
-  }, /*#__PURE__*/React.createElement("input", { ...tagAttributes_switch,
-    ...restA11yAttributes_switch,
-    type: "checkbox",
-    id: id,
-    name: name,
-    value: value,
-    checked: isChecked,
-    onChange: handleChange,
-    className: trackClass,
-    "data-title": title,
-    role: "switch",
-    "aria-disabled": ariaDisabled,
-    "aria-label": isReadOnly ? readOnlyAriaLabel : ariaLabel
-  }), /*#__PURE__*/React.createElement("svg", {
-    className: thumbClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: THUMB_RADIUS[size]
-  })), hasStateIndication ? /*#__PURE__*/React.createElement("svg", {
-    className: labelIndicationClass,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, isChecked ? /*#__PURE__*/React.createElement("rect", {
-    width: "100%",
-    height: "100%",
-    rx: "50%"
-  }) : /*#__PURE__*/React.createElement("circle", {
-    cx: "50%",
-    cy: "50%",
-    r: OFF_LABEL_RADIUS[size]
-  })) : null));
-};
-
-export default Switch;
-Switch.defaultProps = defaultProps;
-Switch.propTypes = propTypes;

package/es/v1/Switch/__tests__/Switch.spec.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import Switch from "../Switch";
-describe('Switch', () => {
-  test('rendering the defult props', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Switch, null));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the Switch with Checked', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Switch, {
-      id: "switch",
-      isChecked: true
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('rendering the Switch with Disabled', () => {
-    const {
-      asFragment
-    } = render( /*#__PURE__*/React.createElement(Switch, {
-      id: "switch",
-      isChecked: true,
-      isDisabled: true
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap

@@ -1,135 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Switch rendering the Switch with Checked 1`] = `
-<DocumentFragment>
-  <div
-    class="inlineFlex row alignItems_center container medium checked enabled"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <div
-      class="noShrink trackWrapper"
-      data-id="flex"
-      data-test-id="flex"
-    >
-      <input
-        checked=""
-        class="track"
-        id="switch"
-        role="switch"
-        type="checkbox"
-        value=""
-      />
-      <svg
-        class="thumb commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="50%"
-          cy="50%"
-          r="42.85%"
-        />
-      </svg>
-      <svg
-        class="onLabel commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          height="100%"
-          rx="50%"
-          width="100%"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Switch rendering the Switch with Disabled 1`] = `
-<DocumentFragment>
-  <div
-    class="inlineFlex row alignItems_center container medium checked disabled"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <div
-      class="noShrink trackWrapper"
-      data-id="flex"
-      data-test-id="flex"
-    >
-      <input
-        aria-disabled="true"
-        checked=""
-        class="track"
-        id="switch"
-        role="switch"
-        type="checkbox"
-        value=""
-      />
-      <svg
-        class="thumb commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="50%"
-          cy="50%"
-          r="42.85%"
-        />
-      </svg>
-      <svg
-        class="onLabel commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <rect
-          height="100%"
-          rx="50%"
-          width="100%"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`Switch rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="inlineFlex row alignItems_center container medium unChecked enabled"
-    data-id="flex"
-    data-test-id="flex"
-  >
-    <div
-      class="noShrink trackWrapper"
-      data-id="flex"
-      data-test-id="flex"
-    >
-      <input
-        class="track"
-        role="switch"
-        type="checkbox"
-        value=""
-      />
-      <svg
-        class="thumb commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="50%"
-          cy="50%"
-          r="42.85%"
-        />
-      </svg>
-      <svg
-        class="offLabel commonSvg"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="50%"
-          cy="50%"
-          r="37.5%"
-        />
-      </svg>
-    </div>
-  </div>
-</DocumentFragment>
-`;

package/es/v1/Switch/contants/index.js

@@ -1,24 +0,0 @@
-export const OFF_LABEL_RADIUS = {
-  small: '35.7%',
-  medium: '37.5%',
-  large: '38.9%',
-  xlarge: '40%'
-};
-export const THUMB_RADIUS = {
-  small: '40%',
-  medium: '42.85%',
-  large: '44.45%',
-  xlarge: '45.45%'
-};
-export const ITEMS_DIRECTION = {
-  start: 'row',
-  end: 'rowReverse',
-  top: 'column',
-  bottom: 'columnReverse'
-};
-export const ALIGN_ITEMS = {
-  start: 'center',
-  end: 'center',
-  top: 'start',
-  bottom: 'start'
-};