@xqmsg/ui-core 0.22.1 → 0.22.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.22.1",
+  "version": "0.22.3",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -63,10 +63,10 @@
     "@storybook/builder-webpack5": "^6.5.10",
     "@storybook/manager-webpack5": "^6.5.16",
     "@storybook/react": "^6.5.10",
-    "@svgr/rollup": "^6.5.1",
-    "@svgr/webpack": "^6.3.1",
-    "@types/react": "^18.2.1",
-    "@types/react-dom": "^18.2.2",
+    "@svgr/rollup": "^8.0.1",
+    "@svgr/webpack": "^8.0.1",
+    "@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",
@@ -102,7 +102,7 @@
     "@hookform/resolvers": "^2.9.7",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^0.27.2",
-    "framer-motion": "6.3.0",
+    "framer-motion": "6.4.1",
     "react-hook-form": "^7.43.9",
     "react-icons": "^4.8.0",
     "react-is": "^18.2.0",

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/icons/gear/GearIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { JSXIconProps } from '..';
+import { colors } from '../../../theme/foundations/colors';
+import { Box } from '@chakra-ui/react';
+
+export const GearIcon: React.FC<JSXIconProps> = ({
+  boxSize,
+  color,
+  ...props
+}) => {
+  return (
+    <Box {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={boxSize ?? 16}
+        height={boxSize ?? 17}
+        fill="none"
+        viewBox="0 0 16 17"
+        {...props}
+      >
+        <path
+          fill={color ?? colors.white}
+          d="M10.42 7.9c.376 0 .661-.346.51-.69a3.2 3.2 0 00-3.276-1.892c-.375.04-.532.461-.344.787L8.173 7.6a.6.6 0 00.52.3h1.726zM6.272 6.706c-.189-.326-.632-.4-.854-.096A3.186 3.186 0 004.8 8.5c0 .707.23 1.36.618 1.89.222.304.665.23.854-.096L7.134 8.8a.6.6 0 000-.6l-.862-1.494zM7.31 10.895c-.188.326-.03.746.344.786a3.2 3.2 0 003.275-1.891c.152-.344-.133-.69-.51-.69H8.693a.6.6 0 00-.52.3l-.863 1.495z"
+        ></path>
+        <path
+          fill={color ?? colors.white}
+          fillRule="evenodd"
+          d="M11.304 3.978l.516-.894a.6.6 0 00-1.04-.6l-.515.893A5.563 5.563 0 008.6 2.932V1.9a.6.6 0 00-1.2 0v1.032a5.564 5.564 0 00-1.665.445l-.515-.893a.6.6 0 00-1.04.6l.516.894a5.632 5.632 0 00-1.218 1.218l-.894-.516a.6.6 0 10-.6 1.04l.893.515A5.564 5.564 0 002.432 7.9H1.4a.6.6 0 000 1.2h1.032c.062.587.215 1.146.445 1.665l-.893.515a.6.6 0 10.6 1.04l.894-.517a5.63 5.63 0 001.218 1.219l-.516.894a.6.6 0 001.04.6l.515-.893c.518.23 1.078.383 1.665.445V15.1a.6.6 0 101.2 0v-1.032a5.562 5.562 0 001.665-.445l.515.893a.6.6 0 101.04-.6l-.516-.894a5.632 5.632 0 001.218-1.219l.894.516a.6.6 0 10.6-1.039l-.893-.515c.23-.519.383-1.078.445-1.665H14.6a.6.6 0 100-1.2h-1.032a5.564 5.564 0 00-.445-1.665l.893-.516a.6.6 0 00-.6-1.039l-.894.516a5.633 5.633 0 00-1.218-1.218zM8 4.1a4.38 4.38 0 00-2.225.603 4.422 4.422 0 00-1.599 1.619A4.38 4.38 0 003.6 8.5a4.38 4.38 0 00.601 2.222 4.422 4.422 0 001.623 1.603A4.38 4.38 0 008 12.9a4.38 4.38 0 002.223-.602 4.423 4.423 0 001.602-1.622A4.38 4.38 0 0012.4 8.5a4.38 4.38 0 00-.602-2.224 4.422 4.422 0 00-1.623-1.602A4.38 4.38 0 008 4.1z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </Box>
+  );
+};
+
+export default GearIcon;

package/src/components/icons/index.tsx

@@ -35,10 +35,30 @@ import { Video } from './video';
 import { Page } from './page';
 import { Workspace } from './workspace';
 import { Task } from './task';
+import GearIcon from './gear/GearIcon';
+import { BoxProps } from '@chakra-ui/react';
 
 export interface IconProps {
   boxSize: string;
 }
+export interface JSXIconProps
+  extends Pick<
+    BoxProps,
+    | 'p'
+    | 'padding'
+    | 'pr'
+    | 'paddingRight'
+    | 'pl'
+    | 'paddingLeft'
+    | 'pt'
+    | 'paddingTop'
+    | 'pb'
+    | 'paddingBottom'
+  > {
+  color?: string;
+  boxSize?: string;
+}
+
 export {
   Checkmark,
   ChevronDown,
@@ -53,6 +73,7 @@ export {
   FolderOutline,
   FolderAddFill,
   FolderAddOutline,
+  GearIcon,
   Google,
   GoogleDrive,
   Group,

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