@xqmsg/ui-core 0.22.2 → 0.22.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.22.2",
+  "version": "0.22.4",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -65,8 +65,8 @@
     "@storybook/react": "^6.5.10",
     "@svgr/rollup": "^8.0.1",
     "@svgr/webpack": "^8.0.1",
-    "@types/react": "^18.2.1",
-    "@types/react-dom": "^18.2.2",
+    "@types/react": "^18.2.12",
+    "@types/react-dom": "^18.2.5",
     "@typescript-eslint/eslint-plugin": "^5.59.5",
     "@typescript-eslint/parser": "^5.59.5",
     "babel-loader": "8.1.0",
@@ -111,6 +111,7 @@
     "yup": "^0.32.11"
   },
   "resolutions": {
+    "framer-motion": "6.4.1",
     "**/@typescript-eslint/eslint-plugin": "^5.59.5",
     "**/@typescript-eslint/parser": "^5.59.5"
   }

package/src/components/banner/index.tsx

@@ -42,7 +42,7 @@ export const Banner: React.FC<BannerProps> = ({
   }, [variant]);
 
   return (
-    <Alert variant={variant}>
+    <Alert variant={variant} borderRadius="4px">
       <AlertDescription>
         <Flex
           flexDirection={type === 'condensed' ? 'row' : 'column'}

package/src/components/input/StackedPilledInput/index.tsx

@@ -50,7 +50,13 @@ const StackedPilledInput = React.forwardRef<
     }
 
     if (watchedValue !== undefined && watchedValue?.length) {
-      setLatestFormValueToArray(watchedValue.split(',').filter(Boolean));
+      setLatestFormValueToArray(
+        watchedValue
+          .split(';')
+          .join(',')
+          .split(',')
+          .filter(Boolean)
+      );
 
       if (latestTokenElement) {
         latestTokenElement.scrollIntoView({
@@ -69,9 +75,9 @@ const StackedPilledInput = React.forwardRef<
     }
 
     if (
-      (e.key === ' ' ||
-        e.key === 'Enter' ||
+      (e.key === 'Enter' ||
         e.key === ',' ||
+        e.key === ';' ||
         e.key === 'Tab') &&
       localValue.trim().length
     ) {
@@ -99,7 +105,14 @@ const StackedPilledInput = React.forwardRef<
       }
 
       const filteredUniqueValues = Array.from(
-        new Set([...lastestFormValueToArray, ...localValue.trim().split(',')])
+        new Set([
+          ...lastestFormValueToArray,
+          ...localValue
+            .trim()
+            .split(';')
+            .join(',')
+            .split(','),
+        ])
       );
 
       setLocalValue('');
@@ -304,7 +317,10 @@ const StackedPilledInput = React.forwardRef<
               onChange={e =>
                 tokenIndex === null &&
                 setLocalValue(
-                  e.target.value.trim().replace(',', '').length
+                  e.target.value
+                    .trim()
+                    .replace(',', '')
+                    .replace(';', '').length
                     ? e.target.value
                     : ''
                 )

package/src/components/input/StackedSwitch/index.tsx

@@ -13,8 +13,7 @@ const StackedSwitch = React.forwardRef<HTMLInputElement, StackedSwitchProps>(
 
     return (
       <Switch
-        h="26px"
-        mx="4px"
+        h="21px"
         _focus={{
           border: '2px solid',
           borderColor: colors.border.focus,

package/src/components/input/components/label/index.tsx

@@ -18,7 +18,7 @@ export const Label: React.FC<LabelProps> = ({
   label,
 }) => {
   return (
-    <FormLabel display="flex">
+    <FormLabel display="flex" ml="0">
       {label}
       {isRequired && (
         <Box ml={1} color={colors.label.error}>

package/src/components/input/index.tsx

@@ -251,7 +251,11 @@ export function Input<T extends FieldValues>({
           id={name}
           isInvalid={isInvalid}
           position="relative"
-          py={label || helperText || isInvalid ? 5 : 0}
+          py={
+            (inputType !== 'checkbox' && label) || helperText || isInvalid
+              ? 5
+              : 0
+          }
         >
           {label && inputType !== 'checkbox' && (
             <Label