onekijs-ui 0.19.21 → 0.19.23

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "onekijs-ui",
   "private": false,
-  "version": "0.19.21",
+  "version": "0.19.23",
   "description": "Advanced React Web Components",
   "source": "src/index.ts",
   "main": "dist/index.js",
@@ -34,7 +34,7 @@
     "@clr/city": "^1.1.0",
     "@popperjs/core": "^2.4.4",
     "@reach/observe-rect": "^1.2.0",
-    "onekijs-framework": "^0.19.20",
+    "onekijs-framework": "^0.19.23",
     "react-popper": "^2.3.0",
     "react-popper-tooltip": "^4.4.2",
     "react-virtualized-auto-sizer": "^1.0.2",
@@ -53,5 +53,5 @@
     "react-dom": ">=18"
   },
   "sideEffects": false,
-  "gitHead": "1cda04828413aa2f83c4a6c16d2a6e409185df40"
+  "gitHead": "5d37d3dcaaafb611903cf3e03aba473adbae9522"
 }

package/src/components/alert/components/AlertComponent.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import { FCC } from 'onekijs-framework';
+import { AlertProps } from '../typings';
+import InfoIcon from '../../icon/InfoIcon';
+import DebugIcon from '../../icon/DebugIcon';
+import ErrorIcon from '../../icon/ErrorIcon';
+import WarningIcon from '../../icon/WarningIcon';
+import SuccessIcon from '../../icon/SuccessIcon';
+
+const getDefautltIconComponent = (kind: AlertProps['kind']) => {
+  switch(kind) {
+    case 'debug':
+      return DebugIcon;
+    case 'error':
+      return ErrorIcon;
+    case 'warning':
+      return WarningIcon;
+    case 'success':
+      return SuccessIcon;
+    default:
+      return InfoIcon;
+  }
+}
+
+const getIconSize = (size: AlertProps['size']) => {
+  switch(size) {
+    case 'small':
+      return '24px';
+    case 'large':
+      return '48px';
+    default:
+      return '36px';
+  }
+}
+
+const AlertComponent: FCC<AlertProps> = ({
+  kind = 'info',
+  icon = true,
+  IconComponent,
+  className,
+  children,
+  size,
+}) => {
+  if (IconComponent === undefined) {
+    IconComponent = getDefautltIconComponent(kind);
+  }
+  return (
+    <div className={addClassname(`o-alert o-alert-${kind}`, className)}>
+      {icon && <IconComponent width={getIconSize(size)} height={getIconSize(size)} marginRight='20px' marginLeft='20px' />}
+      <div>{children}</div>
+    </div>
+  )
+}
+
+export default AlertComponent;

package/src/components/alert/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import AlertComponent from './components/AlertComponent';
+import alertStyle from './style';
+
+const Alert = styled(AlertComponent)`
+  ${alertStyle}
+`;
+
+export default Alert;

package/src/components/alert/style.ts

@@ -0,0 +1,57 @@
+import { css } from 'styled-components';
+import { ComponentStyle } from '../../styles/typings';
+import { AlertProps } from './typings';
+import { display } from '../../styles/display';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import { borderColor, borderRadius, borderStyle, borderWidth } from '../../styles/border';
+import { color } from '../../styles/typography';
+import { marginBottom, marginTop, padding } from '../../styles/spacing';
+
+const getBackgroundColor = (kind: AlertProps['kind']) => {
+  switch(kind) {
+    case 'success': return 'green-100';
+    case 'info': return 'blue-100';
+    case 'warning': return 'orange-200';
+    case 'error': return 'red-100';
+    default: return 'lighter';
+  }
+}
+
+const getBorderColor = (kind: AlertProps['kind']) => {
+  switch(kind) {
+    case 'success': return 'success';
+    case 'info': return 'info';
+    case 'warning': return 'warning';
+    case 'error': return 'danger';
+    default: return 'darker';
+  }
+}
+
+const getFontColor = (kind: AlertProps['kind']) => {
+  switch(kind) {
+    case 'success': return 'green-800';
+    case 'info': return 'blue-800';
+    case 'warning': return 'orange-800';
+    case 'error': return 'red-800';
+    default: return 'darkest';
+  }
+}
+
+const alertStyle: ComponentStyle<AlertProps> = ({ kind = 'info', marginTop: mTop = '0px', marginBottom: mBottom = '0px', size = 'medium' }) => {
+  return css`
+    ${display('flex')}
+    ${alignItems('center')}
+    ${backgroundColor(getBackgroundColor(kind))}
+    ${borderColor(getBorderColor(kind))}
+    ${color(getFontColor(kind))}
+    ${padding(size === 'large' ? 'lg' : size === 'small' ? 'sm' : 'md')}
+    ${borderStyle('solid')}
+    ${borderWidth('1px')}
+    ${borderRadius('sm')}
+    ${marginTop(mTop)}
+    ${marginBottom(mBottom)}
+  `
+}
+
+export default alertStyle;

package/src/components/alert/typings.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { SpacingPropertyTheme, StylableProps } from '../../styles/typings';
+import { IconProps } from '../icon/typings';
+
+export type AlertProps = StylableProps & {
+  kind?: 'success' | 'info' | 'warning' | 'error' | 'debug'
+  icon?: boolean;
+  IconComponent?: React.FC<IconProps>;
+  marginBottom?: SpacingPropertyTheme;
+  marginTop?: SpacingPropertyTheme;
+  size?: 'small' | 'medium' | 'large'
+}

package/src/components/card/FormCard.tsx

@@ -4,9 +4,10 @@ import Card from '.';
 import { FormCardProps } from './typings';
 import { titlelize } from '../../utils/misc';
 import FormCardDisplayer from './FormCardDisplayer';
+import Alert from '../alert';
 
 
-const FormCard: FCC<FormCardProps> = ({ name, ...cardProps }) => {
+const FormCard: FCC<FormCardProps> = ({ name, help, children, ...cardProps }) => {
   const decorator = useFormDecorator(name, {
     Displayer: (displayerProps: FormDisplayerProps) => {
       return <FormCardDisplayer {...displayerProps} name={typeof cardProps.title === 'string' ? cardProps.title : titlelize(name)} />
@@ -63,7 +64,12 @@ const FormCard: FCC<FormCardProps> = ({ name, ...cardProps }) => {
         {...cardProps}
         open={!metadata.disabled}
         onToggle={() => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name))}
-      />
+      >
+        <>
+          {help && <Alert kind="info" size="small" marginBottom="2xl">{help}</Alert>}
+          {children}
+        </>
+      </Card>
     </FormContext.Provider>
   );
 };

package/src/components/card/typings.ts

@@ -25,4 +25,5 @@ export type CardTitleProps = {
 export type FormCardProps = CardProps &
   FormDecoratorOptions & {
     name: string;
+    help?: ReactNode;
   };

package/src/components/icon/CloseAllIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = ({ className, onClick }) => {
   return (
@@ -25,9 +26,11 @@ const IconComponent: FC<IconProps> = ({ className, onClick }) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width, height, color: cssColor = 'inherit' }) => css`
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/CloseIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const CloseIconComponent: FC<IconProps> = (props) => {
   return (
@@ -20,9 +21,11 @@ const CloseIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(CloseIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/CrossIcon.tsx

@@ -1,9 +1,10 @@
 //#region -- system import
 import React, { FC } from 'react';
 import styled from 'styled-components';
+import { IconProps } from './typings';
 //#endregion
 
-const IconComponent: FC<React.InputHTMLAttributes<HTMLDivElement>> = ({ className }) => {
+const IconComponent: FC<IconProps> = ({ className }) => {
   return (
     <div className={className}>
       <svg className="o-icon-close-svg" viewBox="0 0 100 100">
@@ -16,6 +17,8 @@ const IconComponent: FC<React.InputHTMLAttributes<HTMLDivElement>> = ({ classNam
 const CrossIcon = styled(IconComponent)`
   width: ${(props) => props.width || '32px'};
   height: ${(props) => props.height || '32px'};
+  margin-top: ${(props) => props.marginRight || '0px'};
+  margin-left: ${(props) => props.marginLeft || '0px'};
   .o-icon-close-svg {
     display: inline-block;
     stroke-width: 0;

package/src/components/icon/DebugIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const DebugIconComponent: FC<IconProps> = (props) => {
   return (
@@ -21,9 +22,11 @@ const DebugIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(DebugIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/ErrorIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const ErrorIconComponent: FC<IconProps> = (props) => {
   return (
@@ -20,9 +21,11 @@ const ErrorIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(ErrorIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'danger' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'danger', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/FileIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { addClassname } from '../../utils/style';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = (props) => {
   const className = addClassname('o-icon-file', props.className);
@@ -23,9 +24,11 @@ const IconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-file-svg {

package/src/components/icon/FilterIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 // <!-- Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) -->
 const IconComponent: FC<IconProps> = ({ className, onClick }) => {
@@ -17,9 +18,11 @@ const IconComponent: FC<IconProps> = ({ className, onClick }) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width, height, color: cssColor = 'inherit' }) => css`
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/FolderIcon.tsx

@@ -4,6 +4,7 @@ import { addClassname } from '../../utils/style';
 import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = (props) => {
   const className = addClassname('o-icon-folder', props.className);
@@ -23,9 +24,11 @@ const IconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor' }) => css`
+  ${({ width = '24px', height = '24px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-folder-svg {

package/src/components/icon/HelpIcon.tsx

@@ -5,6 +5,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { IconProps } from './typings';
 import { addClassname } from '../../utils/style';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = ({ className, onClick, style }) => {
   return (
@@ -21,9 +22,11 @@ const IconComponent: FC<IconProps> = ({ className, onClick, style }) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/HideIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { addClassname } from '../../utils/style';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = (props) => {
   const className = addClassname('o-icon-hide', props.className);
@@ -18,9 +19,11 @@ const IconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-hide-svg {

package/src/components/icon/InfoIcon.tsx

@@ -4,11 +4,13 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
+import { fill } from '../../styles/svg';
 
 const InfoIconComponent: FC<IconProps> = (props) => {
   return (
     <div {...props}>
-      <svg className="o-icon-success-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
+      <svg className="o-icon-info-svg" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
         <path
           fillRule="evenodd"
           clipRule="evenodd"
@@ -20,15 +22,17 @@ const InfoIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(InfoIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'info' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'info', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
     .o-icon-info-svg {
       display: inline-block;
-      fill: currentColor;
+      ${fill('currentColor')}
     }
   `}
 `;

package/src/components/icon/LoadingIcon.tsx

@@ -4,6 +4,7 @@ import { stroke } from '../../styles/svg';
 import { ComponentStyle } from '../../styles/typings';
 import { addClassname } from '../../utils/style';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = ({ className }) => {
   return (
@@ -45,10 +46,14 @@ const iconStyle: ComponentStyle<IconProps> = ({
   width: cssWidth = '16px',
   height: cssHeight = '16px',
   color: cssColor = 'primary',
+  marginLeft: ml = '0',
+  marginRight: mr = '0',
 }) => {
   return css`
     height: ${cssHeight};
     width: ${cssWidth};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     display: inline-flex;
     align-items: center;
 

package/src/components/icon/MenuIcon.tsx

@@ -5,6 +5,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { IconProps } from './typings';
 import { cursor } from '../../styles/interactivity';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = (props) => {
   return (
@@ -19,9 +20,11 @@ const IconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/RefreshIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const RefreshIconComponent: FC<IconProps> = (props) => {
   return (
@@ -28,9 +29,11 @@ const RefreshIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(RefreshIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/RemoveIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const RemoveIcon: FC<IconProps> = ({ className, onClick }) => {
   return (
@@ -26,9 +27,11 @@ const RemoveIcon: FC<IconProps> = ({ className, onClick }) => {
 };
 
 export default styled(RemoveIcon)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'inherit' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/SearchIcon.tsx

@@ -5,6 +5,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { IconProps } from './typings';
 import styled, { css } from 'styled-components';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = ({ className, onClick }) => {
   return (
@@ -23,9 +24,11 @@ const IconComponent: FC<IconProps> = ({ className, onClick }) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width, height, color: cssColor = 'inherit' }) => css`
+  ${({ width, height, color: cssColor = 'inherit', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}

package/src/components/icon/ShowIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { addClassname } from '../../utils/style';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const IconComponent: FC<IconProps> = (props) => {
   const className = addClassname('o-icon-show', props.className);
@@ -17,9 +18,11 @@ const IconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(IconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'currentColor', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('flex')};
     ${alignItems('center')};
     .o-icon-show-svg {

package/src/components/icon/SuccessIcon.tsx

@@ -4,6 +4,7 @@ import { alignItems } from '../../styles/alignment';
 import { display } from '../../styles/display';
 import { color } from '../../styles/typography';
 import { IconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const SuccessIconComponent: FC<IconProps> = (props) => {
   return (
@@ -23,12 +24,14 @@ const SuccessIconComponent: FC<IconProps> = (props) => {
 };
 
 export default styled(SuccessIconComponent)`
-  ${({ width = '16px', height = '16px', color: cssColor = 'success' }) => css`
+  ${({ width = '16px', height = '16px', color: cssColor = 'success', marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
     ${display('flex')};
     ${alignItems('center')};
     ${color(cssColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     .o-icon-success-svg {
       display: inline-block;
       fill: currentColor;

package/src/components/icon/TogglerIcon.tsx

@@ -7,6 +7,7 @@ import { color } from '../../styles/typography';
 import { addClassname } from '../../utils/style';
 import LoadingIcon from './LoadingIcon';
 import { TogglerIconProps } from './typings';
+import { marginLeft, marginRight } from '../../styles/spacing';
 
 const toDegree = (position: 'n' | 's' | 'w' | 'e'): string => {
   switch (position) {
@@ -29,6 +30,7 @@ const IconComponent: FC<TogglerIconProps> = ({
   model = 'arrow',
   closeArrowPosition = 'e',
   openArrowPosition = 's',
+
 }) => {
   const iconClassName = addClassname('o-toggler-icon-container', className);
   if (!loading) {
@@ -65,9 +67,11 @@ const IconComponent: FC<TogglerIconProps> = ({
 };
 
 const TogglerIcon = styled(IconComponent)`
-  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true }) => css`
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true,  marginLeft: ml = '0', marginRight: mr = '0' }) => css`
     width: ${width};
     height: ${height};
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
     ${display('inline-flex')};
     ${alignItems('center')};
     ${color(cssColor)}