@xqmsg/ui-core 0.23.1-rc.0 → 0.23.1-rc.2

package/dist/components/input/StackedInput/StackedInput.d.ts

@@ -6,6 +6,7 @@ export interface StackedInputProps extends InputFieldProps {
     leftElement?: React.ReactNode;
     rightElement?: React.ReactNode;
     variant?: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedInput` component.

package/dist/components/input/StackedPilledInput/index.d.ts

@@ -8,6 +8,7 @@ export interface StackedPilledInputProps extends InputFieldProps {
     control: Control<FieldValues, any>;
     separators?: string[];
     variant?: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedPilledInput` component.

package/dist/components/input/StackedTextarea/StackedTextarea.d.ts

@@ -4,6 +4,7 @@ export interface StackedTextareaProps extends TextareaFieldProps {
     isRequired?: boolean;
     allowDefault?: boolean;
     variant: string;
+    label?: string;
 }
 /**
  * A functional React component utilized to render the `StackedTextarea` component.

package/dist/theme/components/button.d.ts

@@ -129,7 +129,6 @@ declare const _default: {
             border: string;
             gap: string;
             height: string;
-            margin: string;
             fontSize: string;
             fontWeight: string;
             lineHeight: string;
@@ -182,7 +181,6 @@ declare const _default: {
             border: string;
             gap: string;
             height: string;
-            margin: string;
             fontSize: string;
             lineHeight: string;
             letterSpacing: string;
@@ -225,7 +223,6 @@ declare const _default: {
             border: string;
             gap: string;
             height: string;
-            margin: string;
             fontSize: string;
             lineHeight: string;
             letterSpacing: string;

package/dist/theme/components/checkbox.d.ts

@@ -9,13 +9,14 @@ declare const _default: {
     } | undefined;
     variants?: {
         mobile: {
-            control: {
-                borderRadius: number;
-                padding: number;
-            };
+            control: {};
             label: {
                 fontSize: string;
+                fontWeight: number;
+                lineHeight: string;
+                padding: string;
             };
+            height: string;
         };
     } | undefined;
     defaultProps?: {

package/dist/theme/components/input.d.ts

@@ -24,6 +24,9 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
     variants: {
@@ -51,18 +54,26 @@ declare const _default: {
                     border: string;
                     borderColor: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
         };
         mobile: {
             field: {
                 fontSize: string;
-                border: string;
                 py: string;
                 px: string;
                 cursor: string;
                 lineHeight: string;
                 fontWeight: number;
                 borderRadius: number;
+                height: string;
+                padding: string;
+                border: string;
+                borderColor: string;
+                borderLeft: string;
+                borderRight: string;
             };
         };
     };

package/dist/theme/components/select.d.ts

@@ -29,6 +29,9 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         icon: {
             color: string;
@@ -63,18 +66,26 @@ declare const _default: {
                     border: string;
                     borderColor: string;
                 };
+                _placeholder: {
+                    color: string;
+                };
             };
         };
         mobile: {
             field: {
                 fontSize: string;
-                border: string;
                 py: string;
                 px: string;
                 cursor: string;
                 lineHeight: string;
                 fontWeight: number;
                 borderRadius: number;
+                height: string;
+                padding: string;
+                border: string;
+                borderColor: string;
+                borderLeft: string;
+                borderRight: string;
             };
         };
     };

package/dist/theme/components/textarea.d.ts

@@ -27,6 +27,9 @@ declare const _default: {
             border: string;
             borderColor: string;
         };
+        _placeholder: {
+            color: string;
+        };
     };
     variants: {
         default: {
@@ -57,28 +60,34 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
         mobile: {
             border: string;
             borderRadius: number;
             paddingY: string;
             paddingX: string;
-            padding: string;
             cursor: string;
             lineHeight: string;
             fontWeight: number;
             resize: string;
             overflowY: string;
             fontSize: string;
+            minHeight: string;
             py: string;
             px: string;
-            display: string;
             height: string;
+            padding: string;
+            borderColor: string;
+            borderLeft: string;
+            borderRight: string;
+            display: string;
             h: string;
             '::placeholder': {
                 color: string;
             };
-            borderColor: string;
             _disabled: {
                 opacity: number;
                 cursor: string;
@@ -92,6 +101,9 @@ declare const _default: {
                 border: string;
                 borderColor: string;
             };
+            _placeholder: {
+                color: string;
+            };
         };
     };
     defaultProps: {

package/dist/ui-core.cjs.development.js

@@ -808,7 +808,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant"];
+var _excluded = ["type", "isRequired", "rightElement", "leftElement", "defaultValue", "allowDefault", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedInput` component.
  */
@@ -821,14 +821,17 @@ var StackedInput = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref)
     defaultValue = _ref2.defaultValue,
     allowDefault = _ref2.allowDefault,
     variant = _ref2.variant,
+    label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, variant, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({
+  var isMobile = variant === 'mobile';
+  var placeholder = isMobile && label ? label : undefined;
+  return /*#__PURE__*/React__default.createElement(react.InputGroup, null, leftElement && leftElement, label, /*#__PURE__*/React__default.createElement(react.Input, Object.assign({}, props, {
+    placeholder: placeholder,
     type: type,
-    isRequired: isRequired
-  }, props, {
+    isRequired: isRequired,
     ref: _ref,
     defaultValue: defaultValue,
-    fontSize: variant === 'mobile' ? '17px' : '13px',
+    fontSize: isMobile ? '17px' : '13px',
     variant: variant,
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && !allowDefault) {
@@ -1172,20 +1175,23 @@ var StackedSelect = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref
   }));
 });
 
-var _excluded$2 = ["isRequired", "allowDefault", "variant"];
+var _excluded$2 = ["isRequired", "allowDefault", "variant", "label"];
 /**
  * A functional React component utilized to render the `StackedTextarea` component.
  */
 var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _ref) {
   var allowDefault = _ref2.allowDefault,
     variant = _ref2.variant,
+    label = _ref2.label,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded$2);
-  if (variant === 'mobile') {
-    return /*#__PURE__*/React__default.createElement(react.Flex, null, allowDefault, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
+  var isMobile = variant === 'mobile';
+  if (isMobile) {
+    return /*#__PURE__*/React__default.createElement(react.Flex, null, /*#__PURE__*/React__default.createElement(react.Textarea, Object.assign({
       ref: _ref
     }, props, {
       variant: variant,
       fontSize: "17px",
+      placeholder: label != null ? label : '',
       onKeyDown: function onKeyDown(e) {
         if (e.key === 'Enter' && !allowDefault) {
           e.stopPropagation();
@@ -1198,7 +1204,7 @@ var StackedTextarea = /*#__PURE__*/React__default.forwardRef(function (_ref2, _r
     ref: _ref
   }, props, {
     variant: variant,
-    fontSize: variant === '' ? '13px' : '17px',
+    fontSize: "13px",
     onKeyDown: function onKeyDown(e) {
       if (e.key === 'Enter' && !allowDefault) {
         e.stopPropagation();
@@ -1568,7 +1574,8 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     disabled = _ref2.disabled,
     _ref2$separators = _ref2.separators,
     separators = _ref2$separators === void 0 ? ['Enter', ' ', ',', ';', 'Tab'] : _ref2$separators,
-    variant = _ref2.variant;
+    variant = _ref2.variant,
+    label = _ref2.label;
   var watchedValue = reactHookForm.useWatch({
     control: control,
     name: name
@@ -1716,6 +1723,18 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
     borderRadius: isMobile ? '0' : '4px',
     alignItems: "center",
     justifyContent: "space-between",
+    style: isMobile ? {
+      cursor: 'pointer',
+      height: '48px',
+      fontSize: '17px',
+      lineHeight: '20px',
+      fontWeight: 400,
+      padding: '12px 16px 12px 0px',
+      borderRadius: 0,
+      border: '0.5px solid rgba(153, 153, 153, 0.1)',
+      borderLeft: 'none',
+      borderRight: 'none'
+    } : undefined,
     onClick: function onClick() {
       if (isFocussed && tokenIndex !== null) {
         setTokenIndex(null);
@@ -1795,7 +1814,11 @@ var StackedPilledInput = /*#__PURE__*/React__default.forwardRef(function (_ref2,
       setIsFocussed(false);
       return setTokenIndex(null);
     },
-    variant: variant
+    placeholder: isMobile && label && lastestFormValueToArray.length === 0 ? label : '',
+    variant: variant,
+    style: isMobile ? {
+      border: 'none'
+    } : undefined
   }))));
 });
 
@@ -1897,7 +1920,8 @@ function Input(_ref) {
           defaultValue: defaultValue,
           value: value,
           allowDefault: allowDefault,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'radio':
         return /*#__PURE__*/React__default.createElement(StackedRadioGroup, {
@@ -1946,7 +1970,8 @@ function Input(_ref) {
           ref: ref,
           disabled: disabled,
           value: value,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'checkbox':
         return /*#__PURE__*/React__default.createElement(StackedCheckbox, {
@@ -1999,7 +2024,8 @@ function Input(_ref) {
           clearErrors: clearErrors,
           control: control,
           maxLength: maxLength,
-          variant: variant
+          variant: variant,
+          label: label
         });
       case 'switch':
         return /*#__PURE__*/React__default.createElement(StackedSwitch, {
@@ -2995,7 +3021,6 @@ var _excluded$4 = ["label", "ariaLabel", "className", "placeholder", "name", "he
  * A functional React component utilized to render the `SelectNative` component.
  */
 var SelectNative = function SelectNative(_ref) {
-  var _options$;
   var name = _ref.name,
     helperText = _ref.helperText,
     options = _ref.options,
@@ -3009,38 +3034,35 @@ var SelectNative = function SelectNative(_ref) {
     setValue = _ref.setValue,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   // const [selectedOption, setSelectedOption] = useState(
-  //   options.find(option => option.value === value)?.label ?? ''
+  //   options ? options[0] ?? '' : ''
   // );
-  var _useState = React.useState(options ? (_options$ = options[0]) != null ? _options$ : '' : ''),
-    selectedOption = _useState[0],
-    setSelectedOption = _useState[1];
-  //const [selectedOption, setSelectedOption] = useState(null);
-  // useEffect(() => {
-  //   if (defaultValue) {
-  //     setSelectedOption(defaultValue);
-  //   }
-  //   setSelectedOption(
-  //     (fullOptions || options).find(option => option.value === value)?.label ??
-  //       ''
-  //   );
-  // }, [fullOptions, value]);
+  var style = {
+    cursor: 'pointer',
+    color: 'var(--chakra-colors-blue-500)',
+    height: '48px',
+    fontSize: '17px',
+    lineHeight: '20px',
+    fontWeight: 400,
+    padding: '12px 16px 12px 0px',
+    borderRadius: 0,
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none'
+  };
   var handleOnSelectItem = function handleOnSelectItem(selectedValue) {
-    console.log(selectedValue);
     var selectedOption = options == null ? void 0 : options.find(function (_ref2) {
       var val = _ref2.value;
       return selectedValue === val;
     });
-    console.log(selectedValue);
-    setValue(name, selectedValue);
     if (selectedOption) {
       if (onChange) {
         onChange(selectedOption.value);
       }
-      setSelectedOption(selectedOption);
       setValue(name, selectedOption.value);
+    } else {
+      setValue(name, selectedValue);
     }
   };
-  console.log(selectedOption);
   React.useEffect(function () {
     if (defaultValue) {
       handleOnSelectItem(defaultValue);
@@ -3050,61 +3072,34 @@ var SelectNative = function SelectNative(_ref) {
   return /*#__PURE__*/React__default.createElement(reactHookForm.Controller, {
     control: control,
     name: name,
-    // defaultValue={defaultValue as PathValue<T, Path<T>>}
     rules: {
       required: isRequired
     },
     /** @ts-ignore: issues with implicit */
     render: function render(_ref3) {
       var _ref3$field = _ref3.field,
-        ref = _ref3$field.ref;
+        ref = _ref3$field.ref,
+        value = _ref3$field.value;
       return /*#__PURE__*/React__default.createElement(react.FormControl, {
         id: name,
         isInvalid: isInvalid,
         position: "relative",
         py: 0
-      }, /*#__PURE__*/React__default.createElement(react.Box //ref={dropdownRef}
-      , {
-        position: "relative"
-      }, /*#__PURE__*/React__default.createElement(react.Flex, {
-        flexDirection: "column",
-        //ref={dropdownRef}
-        //scrollMargin="15px"
-        border: "0",
-        mt: "3px",
-        //maxH="240px"
-        overflowY: "auto",
-        width: "fit-content",
-        minWidth: "100%",
-        zIndex: 100,
-        tabIndex: -2000,
-        borderTop: "0.5px solid #9999991A"
       }, /*#__PURE__*/React__default.createElement(react.Select, Object.assign({}, props, {
         required: isRequired,
         ref: ref,
-        //value={selectedOption?.value ?? value}
-        // textShadow={`0 0 0 ${colors.label.primary.light}`}
+        value: value,
         disabled: disabled != null ? disabled : false,
         onChange: function onChange(e) {
           return handleOnSelectItem(e.target.value);
         },
-        // onKeyDown={handleOnKeyDown}
-        style: {
-          cursor: 'pointer',
-          color: 'var(--chakra-colors-blue-500)',
-          height: '48px',
-          fontSize: '17px',
-          lineHeight: '20px',
-          fontWeight: 400,
-          padding: '12px 16px 12px 0px',
-          borderRadius: 0
-        }
+        style: style
       }), options && options.map(function (i) {
         return /*#__PURE__*/React__default.createElement("option", {
           value: i.value,
           key: i.sortValue
         }, i.label);
-      })))), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
+      })), isInvalid ? /*#__PURE__*/React__default.createElement(react.FormErrorMessage, null, errorText) : helperText && /*#__PURE__*/React__default.createElement(react.FormHelperText, null, helperText));
     }
   });
 };
@@ -3789,13 +3784,13 @@ var variantPrimaryFlat = function variantPrimaryFlat() {
   return _extends$6({}, baseStyle$2, {
     bg: colors.fill.action,
     bgGradient: null,
-    minWidth: '172.5px',
+    minWidth: '120px',
     padding: '10px 16px',
     borderRadius: '8px',
     border: '0.5px',
     gap: '8px',
     height: '44px',
-    margin: '8px',
+    // margin: '8px',
     fontSize: '17px',
     fontWeight: '500',
     lineHeight: '24px',
@@ -3866,12 +3861,15 @@ var _createMultiStyleConf = /*#__PURE__*/react.createMultiStyleConfigHelpers(ana
   defineMultiStyleConfig = _createMultiStyleConf.defineMultiStyleConfig;
 var roundedCheckbox = /*#__PURE__*/definePartsStyle({
   control: {
-    borderRadius: 50,
-    padding: 3
+    //borderRadius: 50,
   },
   label: {
-    fontSize: '17px'
-  }
+    fontSize: '17px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    padding: '12px 16px 12px 0px'
+  },
+  height: '44px'
 });
 var variants$3 = {
   mobile: roundedCheckbox
@@ -3987,19 +3985,27 @@ var baseStyle$7 = {
       bg: '#ffffff',
       border: '2px solid',
       borderColor: colors.border.focus
+    },
+    _placeholder: {
+      color: colors.label.secondary.light
     }
   }
 };
 var mobileInputs = /*#__PURE__*/_extends$6({}, baseStyle$7, {
   field: {
     fontSize: '17px',
-    border: 'none',
     py: '14px',
     px: '16px',
     cursor: 'pointer',
     lineHeight: '21px',
     fontWeight: 400,
-    borderRadius: 0
+    borderRadius: 0,
+    height: '48px',
+    padding: '12px 16px 12px 0px',
+    border: '0.5px solid rgba(153, 153, 153, 0.1)',
+    borderColor: 'rgba(153, 153, 153, 0.1)',
+    borderLeft: 'none',
+    borderRight: 'none'
   }
 });
 var variants$5 = {
@@ -4558,15 +4564,16 @@ var baseStyle$e = /*#__PURE__*/_extends$6({}, Input$1.baseStyle.field, {
 var mobileInputs$1 = /*#__PURE__*/react.defineStyle( /*#__PURE__*/_extends$6({}, baseStyle$e, Input$1.variants.mobile.field, {
   border: 'none',
   borderRadius: 0,
-  paddingY: '14px',
-  paddingX: '16px',
-  padding: '14px 16px',
+  paddingY: '16px',
+  paddingX: '0',
+  // padding: '16px 16px',
   cursor: 'pointer',
   lineHeight: '21px',
   fontWeight: 400,
   resize: 'none',
   overflowY: 'auto',
-  fontSize: '17px'
+  fontSize: '17px',
+  minHeight: '208px'
 }));
 var variants$9 = {
   "default": baseStyle$e,