@majoo-ui/react 1.62.0 → 1.62.1

package/index.esm.js

@@ -3328,7 +3328,7 @@ function _objectWithoutPropertiesLoose(r, e) {
   return t;
 }
 
-const _excluded$C = ["children"],
+const _excluded$D = ["children"],
   _excluded2$4 = ["children"];
 const GridComponent = styled('div', {
   display: 'grid',
@@ -3518,7 +3518,7 @@ const Grid = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$D);
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
       gridAutoColumns: props.autoColumns,
@@ -3586,7 +3586,7 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$B = ["children", "isCollapse", "css", "contentHeader"];
+const _excluded$C = ["children", "isCollapse", "css", "contentHeader"];
 const StyledDiv$2 = styled(Flex$1, {
   justifyContent: 'center',
   marginLeft: 'auto',
@@ -3629,7 +3629,7 @@ const PageContainer = _ref => {
       css,
       contentHeader
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
     id: "retina-container",
     css: Object.assign({
@@ -3639,7 +3639,7 @@ const PageContainer = _ref => {
 };
 PageContainer.displayName = 'PageContainer';
 
-const _excluded$A = ["className", "children", "radius", "padding", "width", "height"];
+const _excluded$B = ["className", "children", "radius", "padding", "width", "height"];
 const PaperComponent = styled('div', {
   padding: '20px',
   height: 'auto',
@@ -3684,7 +3684,7 @@ const Paper = _ref => {
       width,
       height
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(PaperComponent, _extends({
     className: className,
     css: Object.assign({
@@ -4228,7 +4228,7 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }));
 });
 
-const _excluded$z = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
+const _excluded$A = ["title", "description", "variant", "link", "linkText", "onClick", "onRemove", "children", "bannerBlock", "icon"];
 const Context$3 = /*#__PURE__*/React.createContext();
 const StyledBanner = styled(Flex$1, {
   maxWidth: '100%',
@@ -4455,7 +4455,7 @@ const Banner = _ref => {
       bannerBlock,
       icon
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   return /*#__PURE__*/React.createElement(StyledBanner, _extends({
     variant: variant,
     hasAction: !!onClick,
@@ -5088,7 +5088,7 @@ Card.defaultProps = {
 Card.Label = StyledLabel$2;
 Card.Description = StyledDescription$3;
 
-const _excluded$y = ["children"];
+const _excluded$z = ["children"];
 const BreadcrumbStyle = styled('nav', {
   wordWrap: 'break-word',
   '& li+li:before': {
@@ -5136,7 +5136,7 @@ const BreadcrumbBase = _ref => {
   let {
       children
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$y);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
   return /*#__PURE__*/React__default.createElement(BreadcrumbStyle, _extends({}, rest, {
     "aria-label": "breadcrumb"
   }), /*#__PURE__*/React__default.createElement(Ol, null, children));
@@ -5387,7 +5387,7 @@ Badge.defaultProps = {
 };
 Badge.displayName = 'Badge';
 
-const _excluded$x = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
+const _excluded$y = ["className", "img", "children", "onLoadingStatusChange", "delayMs", "onClick", "css"];
 const StyledAvatar = styled(AvatarPrimitive.Root, {
   width: '32px',
   height: '32px',
@@ -5431,7 +5431,7 @@ function Avatar(_ref) {
       onClick,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$y);
   return /*#__PURE__*/React__default.createElement(StyledAvatar, _extends({
     className: className,
     onClick: onClick,
@@ -5455,7 +5455,7 @@ Avatar.defaultProps = {
   delayMs: 0
 };
 
-const _excluded$w = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
+const _excluded$x = ["className", "src", "alt", "width", "height", "objectFit", "fallback", "fallbackTitle", "css", "cssFallback", "rounded"];
 const ContainerFallback = styled(Flex$1, {
   boxSizing: 'border-box',
   border: '2px dashed #C0C4C4',
@@ -5504,7 +5504,7 @@ function Image(_ref) {
       cssFallback,
       rounded
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$w);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$x);
   const {
     t
   } = useTranslation('translation');
@@ -5933,7 +5933,7 @@ for (var COLLECTION_NAME in DOMIterables) {
 
 handlePrototype(DOMTokenListPrototype, 'DOMTokenList');
 
-const _excluded$v = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
+const _excluded$w = ["children", "label", "color", "css", "withClick", "side", "align", "delayDuration"];
 const {
   zIndices: zIndices$2
 } = foundations;
@@ -6049,7 +6049,7 @@ const Tooltip$1 = _ref => {
       align,
       delayDuration
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$v);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$w);
   const [open, setOpen] = useState(false);
   return /*#__PURE__*/React__default.createElement(Provider, null, /*#__PURE__*/React__default.createElement(TooltipBase, _extends({}, rest, {
     open: withClick ? open : undefined,
@@ -6087,7 +6087,7 @@ Tooltip$1.defaultProps = {
   delayDuration: 200
 };
 
-const _excluded$u = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
+const _excluded$v = ["className", "value", "max", "getValueLabel", "color", "size", "rounded", "width"];
 const StyledProgress$1 = styled$1(ProgressPrimitive.Root, {
   position: 'relative',
   overflow: 'hidden',
@@ -6205,7 +6205,7 @@ function Progress$1(_ref) {
       rounded,
       width
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$v);
   return /*#__PURE__*/React__default.createElement(StyledProgress$1, _extends({
     className: className,
     value: value,
@@ -7193,7 +7193,7 @@ function useMediaQuery(query) {
   return matches;
 }
 
-const _excluded$t = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+const _excluded$u = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
 const TOP_RIGHT_POSITION = 'top-right';
@@ -7362,7 +7362,7 @@ const Toast = _ref => {
       captionOfAction,
       hrefOfAction
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$t);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$u);
   const [isOpen, setIsOpen] = React.useState(false);
   const isMobile = useMediaQuery(`(max-width: 767px`);
   const close = React.useCallback(() => {
@@ -7466,7 +7466,7 @@ Toast.defaultProps = {
   dismissAfter: 5000
 };
 
-const _excluded$s = ["preventDuplicate"];
+const _excluded$t = ["preventDuplicate"];
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
   variants: {
@@ -7519,7 +7519,7 @@ const ToastContainer = ({
     const {
         preventDuplicate
       } = item,
-      toast = _objectWithoutPropertiesLoose(item, _excluded$s);
+      toast = _objectWithoutPropertiesLoose(item, _excluded$t);
     return /*#__PURE__*/React.createElement(Toast, _extends({
       key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
       onRemove: () => removeToast(toast.id)
@@ -8679,7 +8679,7 @@ const catchError = e => {
   return message;
 };
 
-const _excluded$r = ["id", "disabledOfflineIntercept"];
+const _excluded$s = ["id", "disabledOfflineIntercept"];
 let toastCount = 0;
 const ToastProvider = ({
   children,
@@ -8705,7 +8705,7 @@ const ToastProvider = ({
         id,
         disabledOfflineIntercept
       } = toast,
-      rest = _objectWithoutPropertiesLoose(toast, _excluded$r);
+      rest = _objectWithoutPropertiesLoose(toast, _excluded$s);
 
     // eslint-disable-next-line no-plusplus
     const uniqueId = ++toastCount;
@@ -8765,7 +8765,7 @@ const ConditionalWrapper = ({
   children
 }) => condition ? wrapper(children) : children;
 
-const _excluded$q = ["count", "maxCount", "css"];
+const _excluded$r = ["count", "maxCount", "css"];
 const formLabelClassStyle = {
   alignItems: 'start !important',
   '& > div': {
@@ -8868,7 +8868,7 @@ const FormGroup = _ref => {
       maxCount,
       css
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$r);
   const withCounter = Boolean(count || maxCount);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: withCounter,
@@ -8890,7 +8890,7 @@ const FormGroup = _ref => {
 };
 FormGroup.displayName = 'FormGroup';
 
-const _excluded$p = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
+const _excluded$q = ["children", "htmlFor", "variant", "variants", "tooltipLabel", "count", "maxCount", "labelCss"];
 const StyledLabel$1 = styled(LabelPrimitive.Root, Text$1, {
   display: 'inline-block',
   fontSize: '$label',
@@ -8922,7 +8922,7 @@ const FormLabel = _ref => {
       maxCount,
       labelCss
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$q);
   return /*#__PURE__*/React__default.createElement(Flex$1, {
     justify: "between",
     className: "form-label"
@@ -8962,7 +8962,7 @@ FormLabel.defaultProps = {
 };
 FormLabel.displayName = 'FormLabel';
 
-const _excluded$o = ["children", "error", "errorMessage"];
+const _excluded$p = ["children", "error", "errorMessage"];
 const StyledHelper = styled(Text$1, {
   display: 'inline-block',
   color: '$textSecondary',
@@ -8980,7 +8980,7 @@ const FormHelper = _ref => {
       error,
       errorMessage
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$p);
   const errorByMessage = !!errorMessage;
   if (error === undefined && errorByMessage) {
     return /*#__PURE__*/React__default.createElement(StyledHelper, _extends({
@@ -9108,7 +9108,7 @@ const SvgMinusOutline = props => /*#__PURE__*/React.createElement("svg", _extend
   d: "M14.31 10.41H3.9v-2.6h10.41z"
 }));
 
-const _excluded$n = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
+const _excluded$o = ["id", "checked", "indeterminate", "disabled", "onCheckedChange", "label", "index", "value"];
 const StyledIndicator$2 = styled(CheckboxPrimitive.Indicator, {
   alignItems: 'center',
   display: 'flex',
@@ -9166,7 +9166,7 @@ const Checkbox = _ref => {
       index,
       value
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$n);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$o);
   const context = useContext(CheckboxContext);
   const [isChecked, setChecked] = useState(false);
   useEffect(() => {
@@ -9214,7 +9214,7 @@ InputCheckbox.propTypes = {
 };
 InputCheckbox.displayName = 'InputCheckbox';
 
-const _excluded$m = ["children", "size"];
+const _excluded$n = ["children", "size"];
 const InputGroupStyle = styled('div', {
   display: 'flex',
   width: '100%',
@@ -9353,7 +9353,7 @@ const InputGroup = _ref => {
       children,
       size = 'lg'
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$m);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$n);
   const isLetter = children.some(child => child && (child.type.name === 'InputPrefix' || child.type.name === 'InputSuffix' || child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
   const isElement = children.some(child => child && (child.type.name === 'InputLeftElement' || child.type.name === 'InputRightElement'));
   const clone = children.map((child, index) => {
@@ -9556,7 +9556,7 @@ InputSuffix.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
 };
 
-const _excluded$l = ["disabled", "readOnly"];
+const _excluded$m = ["disabled", "readOnly"];
 const disabledStyle = {
   backgroundColor: '$formDisable',
   color: '$textDisable',
@@ -9729,7 +9729,7 @@ const InputText = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$m);
   return /*#__PURE__*/React__default.createElement(StyledInput$1, _extends({
     ref: ref,
     disabled: disabled,
@@ -9750,7 +9750,7 @@ InputText.propTypes = {
 };
 InputText.displayName = 'InputText';
 
-const _excluded$k = ["disabled", "readOnly"];
+const _excluded$l = ["disabled", "readOnly"];
 const StyledTextArea = styled(StyledInput$1, {
   variants: {
     size: {
@@ -9771,7 +9771,7 @@ const InputTextArea = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       disabled,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
   const textareaRef = useRef(null);
   useEffect(() => {
     if (textareaRef.current) {
@@ -9840,7 +9840,7 @@ InputRadioGroup.propTypes = {
 };
 InputRadioGroup.displayName = 'InputRadioGroup';
 
-const _excluded$j = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
+const _excluded$k = ["id", "disabled", "css", "inputType", "inputProps", "description", "readOnly"];
 const INDICATOR_BASE_STYLES = {
   alignItems: 'center',
   display: 'flex',
@@ -10005,7 +10005,7 @@ const InputRadio = _ref => {
       description,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$k);
   function renderInputType(type, checkedValue, onValueChange) {
     switch (type) {
       case 'number':
@@ -12490,7 +12490,7 @@ var NumberFormat = /*@__PURE__*/function (superclass) {
 }(React__default.Component);
 NumberFormat.defaultProps = defaultProps;
 
-const _excluded$i = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
+const _excluded$j = ["placeholder", "value", "size", "isInvalid", "readOnly", "disabled", "control", "name", "maxValueLength", "maxLength", "thousandSeparator"];
 const StyledInput = styled(NumberFormat, {
   // Reset
   appearance: 'none',
@@ -12685,7 +12685,7 @@ const InputNumber = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       maxLength,
       thousandSeparator
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
   return /*#__PURE__*/React__default.createElement(ConditionalWrapper, {
     condition: Boolean(control),
     wrapper: child => /*#__PURE__*/React__default.createElement(Controller, {
@@ -12731,7 +12731,7 @@ InputNumber.defaultProps = {
 InputNumber.name = 'InputText';
 InputNumber.displayName = 'InputNumber';
 
-const _excluded$h = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
+const _excluded$i = ["className", "children", "onClick", "size", "icon", "isRemovable", "disabled", "type", "onRemove", "readOnly"];
 const TagWrapper$4 = styled('div', {
   boxSizing: 'border-box',
   listStyle: 'none',
@@ -12835,7 +12835,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       onRemove,
       readOnly
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   return /*#__PURE__*/React__default.createElement(TagWrapper$4, _extends({
     ref: ref,
     onClick: onClick,
@@ -12873,7 +12873,7 @@ Tag.defaultProps = {
   readOnly: false
 };
 
-const _excluded$g = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
+const _excluded$h = ["size", "isInvalid", "placeholder", "onChange", "onEnter", "onInputChange", "value", "disabled", "readOnly", "max", "maxChar", "pattern", "helperText", "unremovableTags", "onRemoveItem"];
 const Wrapper$2 = styled('div', {
   margin: 0,
   flexDirection: 'column',
@@ -12995,7 +12995,7 @@ function TagsInput(_ref) {
       unremovableTags,
       onRemoveItem
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
   const [tags, setTags] = React__default.useState(value);
   const [regexError, setRegexError] = React__default.useState(false);
   React__default.useEffect(() => {
@@ -13117,8 +13117,8 @@ TagsInput.defaultProps = {
   readOnly: false
 };
 
-const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
-const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
+const _excluded$g = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled"];
+const StyledThumb$2 = styled(SwitchPrimitive.Thumb, {
   display: 'block',
   width: '16px',
   height: '16px',
@@ -13132,7 +13132,7 @@ const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
     transform: 'translateX(36px)'
   }
 });
-const StyledSwitch = styled(SwitchPrimitive.Root, {
+const StyledSwitch$1 = styled(SwitchPrimitive.Root, {
   all: 'unset',
   width: '56px',
   height: '24px',
@@ -13175,7 +13175,7 @@ const StyledSwitch = styled(SwitchPrimitive.Root, {
     '&::before': {
       color: '$textDisable'
     },
-    [`& ${StyledThumb$1}`]: {
+    [`& ${StyledThumb$2}`]: {
       backgroundColor: '$iconDisable'
     }
   }
@@ -13188,14 +13188,14 @@ const InputSwitch = _ref => {
       dataOffLabel,
       disabled
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
-  return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+  return /*#__PURE__*/React__default.createElement(StyledSwitch$1, _extends({
     defaultChecked: defaultChecked,
     dataOnLabel: dataOnLabel,
     dataOffLabel: dataOffLabel,
     disabled: disabled,
     id: id
-  }, props), /*#__PURE__*/React__default.createElement(StyledThumb$1, null));
+  }, props), /*#__PURE__*/React__default.createElement(StyledThumb$2, null));
 };
 InputSwitch.propTypes = {
   id: PropTypes.string,
@@ -13208,6 +13208,135 @@ InputSwitch.propTypes = {
 };
 InputSwitch.displayName = 'InputSwitch';
 
+const _excluded$f = ["id", "defaultChecked", "dataOnLabel", "dataOffLabel", "disabled", "onImage", "offImage", "thumbAltOn", "thumbAltOff"];
+const StyledThumb$1 = styled(SwitchPrimitive.Thumb, {
+  display: 'block',
+  width: '16px',
+  height: '16px',
+  backgroundColor: 'white',
+  boxShadow: '0px 1px 3px grey',
+  borderRadius: '$round',
+  transition: 'transform 100ms',
+  transform: 'translateX(4px)',
+  willChange: 'transform',
+  cursor: 'pointer',
+  position: 'relative',
+  overflow: 'hidden',
+  '&[data-state="checked"]': {
+    transform: 'translateX(36px)'
+  },
+  'img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+    display: 'block'
+  },
+  '.on': {
+    display: 'none'
+  },
+  '.off': {
+    display: 'block'
+  }
+});
+const StyledSwitch = styled(SwitchPrimitive.Root, {
+  all: 'unset',
+  width: '56px',
+  height: '24px',
+  backgroundColor: 'white',
+  borderRadius: '9999px',
+  border: '1px solid $gray150',
+  position: 'relative',
+  cursor: 'pointer',
+  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+  '&:focus': {
+    outline: '1.5px solid $colors$borderFocus'
+  },
+  '&::before': {
+    display: 'block',
+    content: 'attr(dataOffLabel)',
+    position: 'absolute',
+    fontWeight: 600,
+    fontSize: '$label',
+    lineHeight: '$label',
+    letterSpacing: '$label',
+    color: '$textPrimary',
+    right: '$spacing-03'
+  },
+  '&[data-state="checked"]': {
+    '&::before': {
+      display: 'block',
+      content: 'attr(dataOnLabel)',
+      position: 'absolute',
+      fontWeight: 600,
+      fontSize: '$label',
+      lineHeight: '$label',
+      letterSpacing: '$label',
+      color: '$textPrimary',
+      left: '$spacing-03'
+    },
+    [`& ${StyledThumb$1}`]: {
+      '.on': {
+        display: 'block'
+      },
+      '.off': {
+        display: 'none'
+      }
+    }
+  },
+  '&:disabled': {
+    backgroundColor: '$gray200',
+    '&::before': {
+      color: '$textDisable'
+    },
+    [`& ${StyledThumb$1}`]: {
+      backgroundColor: '$iconDisable'
+    }
+  }
+});
+const InputSwitchWithImage = _ref => {
+  let {
+      id,
+      defaultChecked,
+      dataOnLabel,
+      dataOffLabel,
+      disabled,
+      onImage,
+      offImage,
+      thumbAltOn,
+      thumbAltOff
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  return /*#__PURE__*/React__default.createElement(StyledSwitch, _extends({
+    defaultChecked: defaultChecked,
+    dataOnLabel: dataOnLabel,
+    dataOffLabel: dataOffLabel,
+    disabled: disabled,
+    id: id
+  }, props), /*#__PURE__*/React__default.createElement(StyledThumb$1, null, onImage && /*#__PURE__*/React__default.createElement("img", {
+    src: onImage,
+    alt: thumbAltOn,
+    className: "on"
+  }), offImage && /*#__PURE__*/React__default.createElement("img", {
+    src: offImage,
+    alt: thumbAltOff,
+    className: "off"
+  })));
+};
+InputSwitchWithImage.propTypes = {
+  id: PropTypes.string,
+  disabled: PropTypes.bool,
+  dataOnLabel: PropTypes.string,
+  dataOffLabel: PropTypes.string,
+  defaultChecked: PropTypes.bool,
+  checked: PropTypes.bool,
+  onCheckedChange: PropTypes.func,
+  onImage: PropTypes.string,
+  offImage: PropTypes.string,
+  thumbAltOn: PropTypes.string,
+  thumbAltOff: PropTypes.string
+};
+InputSwitchWithImage.displayName = 'InputSwitchWithImage';
+
 const SvgCloseFilled = props => /*#__PURE__*/React.createElement("svg", _extends({
   width: props.size,
   height: props.size,
@@ -56691,4 +56820,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Cell, CheckboxGroup, CheckboxTable, ColorPicker_default as ColorPicker, Colors$1 as Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DatePickerMulti, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, BarChartComponent as BarChart, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$4 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, Cell, CheckboxGroup, CheckboxTable, ColorPicker_default as ColorPicker, Colors$1 as Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, CustomDatePicker, DATE_RANGE_PICKER, DEFAULT, DateColumn, DatePicker, DatePickerMulti, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, Input$7 as Input, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputDateRange, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSignature, InputSuffix, InputSwitch, InputSwitchWithImage, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_30_DAYS, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MONTHLY, MajooProvider, MapPicker, MemoizedEditableTable, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NEXT_MONTH, NEXT_WEEK, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PREV_MONTH, PREV_WEEK, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, PieChartComponent as PieChart, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_CONTROL, RANGE_MONTH, RANGE_PICKER, RANGE_WEEK, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowExpanderMultipleColumn as RowExpanderMultipleColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, rowSelectionWithCallbackColumn as RowSelectionWithCallbackColumn, SINGLE_PICKER, ScrollSync, ScrollSyncNode, SelectBox, SelectContainer, SelectItem, SelectOption, Separator$2 as Separator, Skeleton, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagList, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, ToastProvider, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, WEEKLY, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptionsEn, advancePickerOptionsId, defaultEmptyDataProps, defaultFetchDataParams, pickerReducer, useListOption, useToggle };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@majoo-ui/react",
-  "version": "1.62.0",
+  "version": "1.62.1",
   "main": "./index.esm.js",
   "exports": {
     ".": {

package/src/components/form/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './InputElement';
 export * from './InputNumber';
 export { default as InputTags } from './InputTags/InputTags';
 export { default as InputSwitch } from './InputSwitch/InputSwitch';
+export { default as InputSwitchWithImage } from './InputSwitch/InputSwitchWithImage';
 export { default as InputSearchbox } from './InputSearchbox/InputSearchbox';
 export { default as InputSelect } from './InputSelect/InputSelect';
 export * from './InputSelect';