@itcase/ui 1.1.1 → 1.1.3

package/dist/components/InputMask.js

@@ -0,0 +1,233 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+const inputMaskConfig = {
+  state: {},
+  setState: newComponent => {
+    inputMaskConfig.state = newComponent;
+  },
+  appearance: {},
+  setAppearance: newComponent => {
+    inputMaskConfig.appearance = newComponent;
+  }
+};
+const Input = /*#__PURE__*/React__default.default.forwardRef(function Input(props, ref) {
+  const {
+    appearance,
+    state,
+    id,
+    index,
+    dataTestId,
+    type,
+    className,
+    name,
+    placeholder,
+    isDisabled,
+    value,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  const fillDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_disabled_',
+    propsKey: 'fillDisabled'
+  });
+  const sizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_size_',
+    propsKey: 'size'
+  });
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'input_shape_',
+    propsKey: 'shape'
+  });
+  const textSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'textSize'
+  });
+  const textColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'textColor'
+  });
+  const textColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_disabled_',
+    propsKey: 'textColor'
+  });
+  const caretClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'caret-color_',
+    propsKey: 'caret'
+  });
+  const placeholderTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_',
+    propsKey: 'placeholderTextColor'
+  });
+  const placeholderTextColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'placeholder-text-color_disabled_',
+    propsKey: 'placeholderTextColorDisabled'
+  });
+  const weightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'textWeight'
+  });
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_',
+    propsKey: 'borderWidth'
+  });
+  const borderWidthDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-width_disabled_',
+    propsKey: 'borderWidthDisabled'
+  });
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'borderColor'
+  });
+  const borderColorDisabledClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_disabled_',
+    propsKey: 'borderColorDisabled'
+  });
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default(className, 'input', type === 'number' && 'input_type_number', (textSizeClass || textColorClass || weightClass) && 'text', caretClass, !isDisabled ? fillClass : fillDisabledClass, shapeClass || inputMaskConfig.appearance[appearance] && `input_shape_${inputMaskConfig.appearance[appearance].shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textSizeClass || inputMaskConfig.appearance[appearance] && `text_size_${inputMaskConfig.appearance[appearance].textSize}`.replace(/([A-Z])/g, '-$1').toLowerCase(), weightClass, widthClass, !isDisabled ? borderWidthClass : borderWidthDisabledClass, sizeClass || inputMaskConfig.appearance[appearance] && `input_size_${inputMaskConfig.appearance[appearance].size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderColorClass || inputMaskConfig.appearance[appearance]?.borderColor && `border-color_${inputMaskConfig.appearance[appearance].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), placeholderTextColorClass || inputMaskConfig.appearance[appearance]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.appearance[appearance].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), textColorClass || inputMaskConfig.appearance[appearance]?.textColor && `text-color_${inputMaskConfig.appearance[appearance].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? borderColorClass || inputMaskConfig.state[state]?.borderColor && `border-color_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : borderColorDisabledClass || inputMaskConfig.state[state]?.borderColor && `border-color_disabled_${inputMaskConfig.state[state].borderColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? placeholderTextColorClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : placeholderTextColorDisabledClass || inputMaskConfig.state[state]?.placeholderTextColor && `placeholder-text-color_${inputMaskConfig.state[state].placeholderTextColor}`.replace(/([A-Z])/g, '-$1').toLowerCase(), !isDisabled ? textColorClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase() : textColorDisabledClass || inputMaskConfig.state[state]?.textColor && `text-color_${inputMaskConfig.state[state].textColor}`.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    type: type,
+    id: id,
+    index: index,
+    ref: ref,
+    disabled: isDisabled,
+    placeholder: placeholder,
+    "data-test-id": dataTestId || (name ? `${name}Input` : 'input'),
+    value: value,
+    onBlur: onBlur,
+    onChange: onChange,
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  });
+});
+Input.propTypes = {
+  id: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  checked: PropTypes__default.default.bool,
+  isDisabled: PropTypes__default.default.bool,
+  onBlur: PropTypes__default.default.func,
+  onChange: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+Input.defaultProps = {
+  size: 'm',
+  type: 'text'
+};
+Input.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Input",
+  "props": {
+    "size": {
+      "defaultValue": {
+        "value": "'m'",
+        "computed": false
+      },
+      "required": false
+    },
+    "type": {
+      "defaultValue": {
+        "value": "'text'",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "id": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "className": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "placeholder": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "value": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "checked": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isDisabled": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onChange": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
+    "onKeyDown": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+
+exports.Input = Input;
+exports.inputMaskConfig = inputMaskConfig;

package/dist/components/InputPassword.js

@@ -55,7 +55,7 @@ const inputPasswordConfig = {
     inputPasswordConfig.appearance = newComponent;
   }
 };
-function InputPassword(props) {
+function InputMask(props) {
   const {
     appearance,
     state,
@@ -152,7 +152,7 @@ function InputPassword(props) {
     onClick: revealeHandler
   }));
 }
-InputPassword.propTypes = {
+InputMask.propTypes = {
   id: PropTypes__default.default.string,
   className: PropTypes__default.default.string,
   placeholder: PropTypes__default.default.string,
@@ -164,14 +164,14 @@ InputPassword.propTypes = {
   onKeyDown: PropTypes__default.default.func,
   type: PropTypes__default.default.string
 };
-InputPassword.defaultProps = {
+InputMask.defaultProps = {
   size: 'm',
   type: 'text'
 };
-InputPassword.__docgenInfo = {
+InputMask.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "InputPassword",
+  "displayName": "InputMask",
   "props": {
     "size": {
       "defaultValue": {
@@ -257,5 +257,5 @@ InputPassword.__docgenInfo = {
   }
 };
 
-exports.InputPassword = InputPassword;
+exports.InputMask = InputMask;
 exports.inputPasswordConfig = inputPasswordConfig;

package/dist/components/Label.js

@@ -112,7 +112,7 @@ function Label(props) {
     prefix: 'border_type_',
     propsKey: 'borderType'
   });
-  const textAlignClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'label_text-align_',
     propsKey: 'textAlign'
   });
@@ -136,7 +136,7 @@ function Label(props) {
   // } = labelAppearanceItem
 
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass, borderClass, borderTypeClass, sizeClass, wrapClass, widthClass, alignDirectionClass, alignClass, textAlignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
+    className: clsx__default.default(className, 'label', fillClass || labelAppearanceItem.fill && `fill_${labelAppearanceItem.fill}`.replace(/([A-Z])/g, '-$1').toLowerCase(), fillHoverClass || labelAppearanceItem.fillHover && `fill_hover_${labelAppearanceItem.fillHover}`.replace(/([A-Z])/g, '-$1').toLowerCase(), shapeClass || labelAppearanceItem.shape && `label_shape_${labelAppearanceItem.shape}`.replace(/([A-Z])/g, '-$1').toLowerCase(), borderClass, borderTypeClass, sizeClass || labelAppearanceItem.size && `label_size_${labelAppearanceItem.size}`.replace(/([A-Z])/g, '-$1').toLowerCase(), wrapClass, widthClass, alignDirectionClass, alignClass, type && `label_type_${type}`, set && `label_set_${set}`, mode && `label_mode_${mode}`, onClick && (cursor || 'cursor_type_pointer')),
     "data-tour": dataTour,
     style: labelStyles,
     onClick: onClick,
@@ -146,12 +146,12 @@ function Label(props) {
     className: "label__inner"
   }, typeof label === 'string' ? /*#__PURE__*/React__default.default.createElement(index.Text, {
     className: "label__label",
-    size: labelTextSize,
+    size: labelTextSize || labelAppearanceItem.labelTextSize,
     textColor: labelTextColor || labelAppearanceItem.labelTextColor,
     textColorHover: labelTextColorHover || labelAppearanceItem.labelTextColorHover,
     textWeight: labelTextWeight || labelAppearanceItem.labelTextWeight,
     textWrap: labelTextWrap
-  }, label) : /*#__PURE__*/React__default.default.createElement("div", {
+  }, label || labelAppearanceItem.label) : /*#__PURE__*/React__default.default.createElement("div", {
     className: "label__label"
   }, label), children, showTooltip && /*#__PURE__*/React__default.default.createElement(index$1.Tooltip, {
     alignment: tooltipAlignment,

package/dist/components/Modal.js

@@ -4,7 +4,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var ReactDOM = require('react-dom');
 var clsx = require('clsx');
-var index = require('./Fader.js');
+var index = require('./Overlay.js');
 var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var index$1 = require('./Loader.js');
@@ -59,11 +59,11 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     closeButton,
     contentClassName,
     id,
-    isFader,
-    faderClassName,
-    faderFill,
-    faderFillGradient,
-    faderOpacity,
+    isOverlay,
+    overlayClassName,
+    overlayFill,
+    overlayFillGradient,
+    overlayOpacity,
     isOpen: initialIsOpen,
     isScrollOnOpen,
     isSetFocusOnOpen,
@@ -83,7 +83,7 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     }
   }, []);
   const modalContentRef = React.useRef(null);
-  const modalFaderRef = React.useRef(null);
+  const modalOverlayRef = React.useRef(null);
   const [isOpen, setIsOpen] = React.useState(initialIsOpen);
   const addModalProps = React.useCallback(element => {
     // Change class need in "useEffect"
@@ -132,10 +132,10 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
       if (modalContentElement) {
         modalContentElement.parentNode.appendChild(modalContentElement)
       }
-      // Also move fader to end of modal root container after container
-      const modalFaderElement = modalFaderRef.current
-      if (modalFaderElement) {
-        modalFaderElement.parentNode.appendChild(modalFaderElement)
+      // Also move overlay to end of modal root container after container
+      const modalOverlayElement = modalOverlayRef.current
+      if (modalOverlayElement) {
+        modalOverlayElement.parentNode.appendChild(modalOverlayElement)
       }
     */
   }, [onOpenModal]);
@@ -206,13 +206,13 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
     onClick: closeModal
   }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__wrapper"
-  }, children)), /*#__PURE__*/React__default.default.createElement(index.Fader, {
-    className: clsx__default.default('modal__fader', 'fader_type_modal', faderClassName),
-    fill: faderFill,
-    fillGradient: faderFillGradient,
-    isFader: isFader,
-    opacity: faderOpacity,
-    ref: modalFaderRef
+  }, children)), /*#__PURE__*/React__default.default.createElement(index.Overlay, {
+    className: clsx__default.default('modal__overlay', 'overlay_type_modal', overlayClassName),
+    fill: overlayFill,
+    fillGradient: overlayFillGradient,
+    isOverlay: isOverlay,
+    opacity: overlayOpacity,
+    ref: modalOverlayRef
   })) : null,
   // A DOM element
   modalElement);
@@ -224,11 +224,11 @@ Modal.propTypes = {
   closeText: PropTypes__default.default.string,
   contentClassName: PropTypes__default.default.string,
   debug: PropTypes__default.default.bool,
-  faderFill: PropTypes__default.default.string,
-  faderFillGradient: PropTypes__default.default.string,
-  faderOpacity: PropTypes__default.default.string,
+  overlayFill: PropTypes__default.default.string,
+  overlayFillGradient: PropTypes__default.default.string,
+  overlayOpacity: PropTypes__default.default.string,
   id: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.bool,
+  isOverlay: PropTypes__default.default.bool,
   isScrollOnOpen: PropTypes__default.default.bool,
   isSetFocusOnOpen: PropTypes__default.default.bool,
   modalQuerySelector: PropTypes__default.default.string,
@@ -236,7 +236,7 @@ Modal.propTypes = {
   onOpenModal: PropTypes__default.default.func
 };
 Modal.defaultProps = {
-  isFader: true,
+  isOverlay: true,
   isOpen: false,
   isScrollOnOpen: true,
   isSetFocusOnOpen: true,
@@ -247,7 +247,7 @@ Modal.__docgenInfo = {
   "methods": [],
   "displayName": "Modal",
   "props": {
-    "isFader": {
+    "isOverlay": {
       "defaultValue": {
         "value": "true",
         "computed": false
@@ -340,21 +340,21 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
-    "faderFill": {
+    "overlayFill": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderFillGradient": {
+    "overlayFillGradient": {
       "description": "",
       "type": {
         "name": "string"
       },
       "required": false
     },
-    "faderOpacity": {
+    "overlayOpacity": {
       "description": "",
       "type": {
         "name": "string"

package/dist/components/{Fader.js → Overlay.js}

@@ -22,10 +22,10 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
-function Fader(props) {
+function Overlay(props) {
   const {
     className,
-    isFader,
+    isOverlay,
     type
   } = props;
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
@@ -41,19 +41,15 @@ function Fader(props) {
     propsKey: 'opacity'
   });
   const {
-    styles: faderStyles
+    styles: overlayStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'fader', opacityClass, isFader && 'fader_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
-    style: faderStyles
+    className: clsx__default.default(className, 'overlay', opacityClass, isOverlay && 'overlay_state_visible', type && `${className}_type_${type}`, fillClass, fillGradientClass),
+    style: overlayStyles
   }, "\xA0");
 }
-Fader.propTypes = {
+Overlay.propTypes = {
   className: PropTypes__default.default.string,
-  opacity: PropTypes__default.default.string,
-  opacityDesktop: PropTypes__default.default.string,
-  opacityMobile: PropTypes__default.default.string,
-  opacityTablet: PropTypes__default.default.string,
   fill: PropTypes__default.default.oneOf(fill.default),
   fillMobile: PropTypes__default.default.oneOf(fill.default),
   fillTablet: PropTypes__default.default.oneOf(fill.default),
@@ -62,13 +58,17 @@ Fader.propTypes = {
   fillGradientMobile: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientTablet: PropTypes__default.default.oneOf(fillGradient.default),
   fillGradientDesktop: PropTypes__default.default.oneOf(fillGradient.default),
+  opacity: PropTypes__default.default.string,
+  opacityDesktop: PropTypes__default.default.string,
+  opacityMobile: PropTypes__default.default.string,
+  opacityTablet: PropTypes__default.default.string,
   type: PropTypes__default.default.string,
-  isFader: PropTypes__default.default.any
+  isOverlay: PropTypes__default.default.any
 };
-Fader.__docgenInfo = {
+Overlay.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "Fader",
+  "displayName": "Overlay",
   "props": {
     "className": {
       "description": "",
@@ -77,34 +77,6 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "opacity": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityDesktop": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityMobile": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "opacityTablet": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
     "fill": {
       "description": "",
       "type": {
@@ -177,6 +149,34 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
+    "opacity": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityDesktop": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityMobile": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "opacityTablet": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "type": {
       "description": "",
       "type": {
@@ -184,7 +184,7 @@ Fader.__docgenInfo = {
       },
       "required": false
     },
-    "isFader": {
+    "isOverlay": {
       "description": "",
       "type": {
         "name": "any"
@@ -194,4 +194,4 @@ Fader.__docgenInfo = {
   }
 };
 
-exports.Fader = Fader;
+exports.Overlay = Overlay;

package/dist/components/Response.js

@@ -98,6 +98,7 @@ function Response(props) {
     secondaryButtonShape,
     secondaryButtonSize,
     secondaryButtonWidth,
+    set,
     onClickPrimaryButton,
     onClickSecondaryButton
   } = props;
@@ -144,8 +145,8 @@ function Response(props) {
     propsKey: 'borderType'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass)
-  }, before, ImageComponent, /*#__PURE__*/React__default.default.createElement(index.Group, {
+    className: clsx__default.default(className, 'response', fillClass, fillHoverClass, shapeClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, set && `response_set_${set}`)
+  }, before, ImageComponent || responseConfig.appearance[appearance]?.imageSrc, /*#__PURE__*/React__default.default.createElement(index.Group, {
     className: "response__desc",
     width: "fill"
   }, title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
@@ -157,31 +158,31 @@ function Response(props) {
     className: "response__message",
     size: messageTextSize || responseConfig.appearance[appearance]?.messageTextSize,
     textColor: messageTextColor || responseConfig.appearance[appearance]?.messageTextColor
-  }, message)), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
+  }, message)), (primaryButtonLabel || responseConfig.appearance[appearance]?.primaryButtonLabel || primaryButton || secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel || secondaryButton) && /*#__PURE__*/React__default.default.createElement(index.Group, {
     className: "response__button",
     width: "fill"
-  }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+  }, primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
     after: primaryButtonAfter,
-    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance,
+    appearance: primaryButtonAppearance || responseConfig.appearance[appearance]?.primaryButtonAppearance || 'dev',
     before: primaryButtonBefore,
     className: "response__button-item",
     fill: primaryButtonFill,
     fillHover: primaryButtonFillHover,
-    label: primaryButtonLabel,
+    label: primaryButtonLabel || responseConfig.appearance[appearance].primaryButtonLabel,
     labelTextColor: primaryButtonLabelTextColor,
     labelTextSize: primaryButtonLabelTextSize || responseConfig.appearance[appearance]?.primaryButtonLabelTextSize,
     shape: primaryButtonShape || responseConfig.appearance[appearance]?.primaryButtonShape,
     size: primaryButtonSize || responseConfig.appearance[appearance]?.primaryButtonSize,
     width: primaryButtonWidth || responseConfig.appearance[appearance]?.primaryButtonWidth,
     onClick: onClickPrimaryButton
-  }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
+  }) : primaryButton, secondaryButtonLabel || responseConfig.appearance[appearance]?.secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(index$3.Button, {
     after: secondaryButtonAfter,
-    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance,
+    appearance: secondaryButtonAppearance || responseConfig.appearance[appearance]?.secondaryButtonAppearance || 'dev',
     before: secondaryButtonBefore,
     className: "response__button-item",
     fill: secondaryButtonFill,
     fillHover: secondaryButtonFillHover,
-    label: secondaryButtonLabel,
+    label: secondaryButtonLabel || responseConfig.appearance[appearance].secondaryButtonLabel,
     labelTextColor: secondaryButtonLabelTextColor,
     labelTextSize: secondaryButtonLabelTextSize || responseConfig.appearance[appearance]?.secondaryButtonLabelTextSize,
     shape: secondaryButtonShape || responseConfig.appearance[appearance]?.secondaryButtonShape,